HTML и CSS — это два основных декларативных языка, используемых для создания веб-страниц. HTML, или HyperText Markup Language, отвечает за разметку контента на странице, в то время как CSS, или Cascading Style Sheets, определяет стиль и внешний вид этого контента.
HTML используется для создания структуры страницы с использованием различных тегов, которые определяют заголовки, абзацы, списки, таблицы и другие элементы. Эти теги описывают содержимое страницы и дают информацию о его смысле и организации. HTML имеет простой и понятный синтаксис, что делает его доступным даже для начинающих разработчиков.
Однако, хотя HTML определяет структуру страницы, он не предоставляет средств для стилизации и оформления содержимого. Вот где на помощь приходит CSS. CSS позволяет разработчикам указывать, какой вид будет иметь контент, созданный с помощью HTML-тегов. Он определяет цвета, шрифты, размеры, расположение элементов и многие другие аспекты дизайна веб-страницы.
Один из важных аспектов CSS — это каскадность стилей. Это означает, что если один и тот же элемент имеет несколько стилей, CSS определяет, какой стиль будет применен. Это позволяет разработчикам создавать гибкие структуры дизайна и легко менять внешний вид элементов на странице.
Вместе HTML и CSS позволяют разработчикам создавать красивые, удобочитаемые и хорошо структурированные веб-страницы. Они обеспечивают разделение контента и стиля, что делает код более читабельным и управляемым. Кроме того, использование декларативных языков таких как HTML и CSS упрощает разработку и поддержку веб-страниц, так как разработчикам не нужно беспокоиться о деталях реализации и может сосредоточиться на создании качественной разметки и стилей.
- Определение декларативных языков разметки и стилей
- Роль декларативных языков в веб-разработке
- Основные принципы HTML
- Структура HTML-документа
- —
для заголовков, для абзацев, для изображений, для ссылок и т. д.; 7. Закрывающие теги — каждый открывающий тег должен быть закрыт соответствующим закрывающим тегом для правильной структуры; 8. Комментарии — можно добавлять комментарии в код для пояснения или временного исключения некоторых частей.
Теги, атрибуты и значения HTML состоит из разнообразных тегов, которые позволяют описывать структуру и содержимое веб-страницы. Каждый тег имеет свои атрибуты, которые задают дополнительные параметры или свойства элемента. Значения атрибутов определяются в соответствии с их предназначением и требованиями языка. Теги являются основными строительными блоками HTML и используются для создания различных элементов на странице. Например, тег используется для создания абзацев, а
— для создания таблиц. Атрибуты добавляют дополнительную информацию к тегам и определяют их поведение или визуальное представление. Например, атрибут «href» используется в теге для указания адреса ссылки, атрибут «src» — в теге для указания пути к изображению.
Тег
Атрибуты
Пример значения атрибута
align, class, id, style
left, center, right
href, target, rel, download
«https://example.com», «_blank», «nofollow», «true»
src, alt, width, height
«image.jpg», «Alternate text», «200», «150» Значение атрибута — это информация, передаваемая в атрибут, которая определяет его конкретное свойство или действие. Значение может быть текстовым, числовым или состоять из других элементов языка. Комбинация тегов, атрибутов и значений позволяет создавать разнообразный и интерактивный контент на веб-страницах. Правильное использование и сочетание этих элементов является ключевым фактором для создания качественного HTML-кода и улучшения визуального представления страницы.
Основные принципы CSS Основные принципы CSS включают: 1. Каскадность: Каскадность определяет, как браузер применяет стили к элементам. Если два правила CSS применяются к одному элементу, то браузер выбирает правило с более высоким приоритетом. Приоритет определяется иерархией селекторов и весом строгости. 2. Наследование: Наследование позволяет элементам наследовать стили от своих родительских элементов. Например, если устанавливается шрифт для тега <body>, все вложенные элементы будут наследовать этот шрифт, если не будет явно задан другой. 3. Селекторы: Селекторы используются для выбора элементов, к которым будут применяться стили. Селекторы могут быть основаны на классах, идентификаторах, типах элементов и их атрибутах. 4. Блочная и строчная модель: Блоки и строчные элементы имеют разное поведение при установке размеров и расположении. Блочные элементы занимают всю доступную ширину, а строчные элементы занимают только необходимую ширину для своего содержимого. 5. Бокс-модель: Бокс-модель определяет расположение и размер элемента на странице. Он состоит из контента, границы, отступов и поля. 6. Раскладка: Раскладка определяет размещение элементов на странице. Раскладку можно изменять с помощью свойств, таких как позиционирование, отступы и анимации. Важно понимать основные принципы CSS для создания эффективных и красивых веб-страниц.
Селекторы в CSS Селекторы в CSS позволяют выбирать элементы на веб-странице с использованием различных атрибутов, классов или идентификаторов. Селекторы могут быть очень простыми — они могут выбирать элементы по тегу или классу, или более сложными — они могут выбирать элементы, удовлетворяющие определенным условиям, таким как иерархия или соседство. Некоторые из самых распространенных селекторов в CSS:
Селектор по тегу: выбирает все элементы определенного тега на странице. Например, селектор «p» выбирает все элементы <p>.
Селектор по классу: выбирает все элементы, у которых есть определенный класс. Например, селектор «.red» выбирает все элементы с классом «red».
Селектор по идентификатору: выбирает единственный элемент с определенным идентификатором. Например, селектор «#header» выбирает элемент с идентификатором «header».
Селектор потомка: выбирает элементы, которые являются потомками определенного элемента. Например, селектор «div p» выбирает все элементы <p> внутри элементов <div>.
Селектор соседа: выбирает элементы, которые являются соседними по отношению к другому элементу. Например, селектор «h1 + p» выбирает первый элемент <p> после элемента <h1>. Это только некоторые из множества селекторов, которые можно использовать в CSS. Знание и понимание селекторов позволяет более точно управлять стилями на веб-странице и создавать эффекты, отвечающие требованиям дизайна.
Стилизация с помощью свойств и значений Свойство color позволяет задать цвет текста, используя различные значения, такие как названия цветов (например, «red», «blue») или цвета в шестнадцатеричном формате (например, «#FF0000» для красного цвета). Свойства font-size и font-family позволяют установить размер текста и выбрать шрифт для отображения текста соответственно. Значениями для свойства font-size могут быть числа, пиксели или проценты, а значениями для font-family — имена шрифтов или типы шрифтов, такие как «sans-serif» или «monospace». Свойства background-color и background-image позволяют установить цвет фона элемента и задать изображение, которое будет использоваться в качестве фона соответственно. Значением для background-color может быть название цвета или цвет в шестнадцатеричном формате, а для background-image — путь к изображению. Свойство border позволяет установить границу вокруг элемента. Значением для border может быть толщина границы, ее стиль (например, «solid», «dashed») и цвет границы. С помощью свойства text-align можно выравнивать текст по горизонтали, используя значения «left», «center» или «right». А свойство text-decoration позволяет добавить декоративные эффекты к тексту, такие как подчеркивание, зачеркивание и линия над текстом. Это лишь некоторые из свойств и значений, доступных в CSS, которые используются для стилизации элементов веб-страницы. Используя и комбинируя эти свойства, разработчики могут создавать уникальные и привлекательные дизайны для веб-сайтов.
Семантические элементы HTML HTML предоставляет ряд семантических элементов, которые позволяют структурировать содержимое веб-страницы с точки зрения его смысла и семантики.
<header> — определяет заголовок или контейнер для представления содержимого верхней части веб-страницы.
<nav> — предназначен для создания навигационной панели или меню.
<main> — задаёт основное содержимое документа, которое должно быть уникальным для данной страницы.
<article> — определяет независимый от остального контента блок, например, новость или статью.
<section> — определяет раздел документа, может использоваться как контейнер для связанных по смыслу элементов.
<aside> — задаёт боковую дополнительную информацию, которая не является основным содержимым страницы.
<footer> — определяет подвал документа или раздела, который обычно содержит авторские права, контактную информацию и ссылки на связанные ресурсы. Использование семантических элементов позволяет улучшить доступность, поисковую оптимизацию и структуру веб-страницы, а также облегчает понимание содержимого как для разработчиков, так и для пользователей.
- Теги, атрибуты и значения
- Основные принципы CSS
- Селекторы в CSS
- Стилизация с помощью свойств и значений
- Семантические элементы HTML
Определение декларативных языков разметки и стилей
HTML (HyperText Markup Language) — это язык разметки, который используется для описания структуры веб-страницы. С помощью HTML разработчики могут определить заголовки, абзацы, списки, таблицы и другие элементы веб-страницы. HTML декларативный язык, поскольку разработчики указывают, какие элементы должны быть на веб-странице, но не указывают, как они должны выглядеть.
CSS (Cascading Style Sheets) — язык стилей, который используется для описания внешнего вида элементов веб-страницы. С помощью CSS разработчики могут задавать цвета, шрифты, размеры и другие свойства элементов. CSS также является декларативным языком, поскольку разработчики описывают, как элементы должны выглядеть, но не указывают, как именно это должно быть реализовано внутри браузера пользователя.
Одно из главных преимуществ декларативных языков разметки и стилей состоит в их простоте использования и понимания. Они позволяют разработчикам легко создавать и редактировать веб-страницы без необходимости знать принципы программирования. Кроме того, декларативные языки упрощают сопровождение и обновление кода, поскольку изменения в разметке или стилях могут быть сделаны в одном месте, а затем применены ко всем соответствующим элементам на веб-странице.
| Преимущества декларативных языков разметки и стилей: |
|---|
| Простота использования |
| Легкость сопровождения и обновления кода |
| Отделение разметки от кода приложения |
| Возможность создания кросс-браузерных и адаптивных веб-страниц |
| Возможность повторного использования кода |
Роль декларативных языков в веб-разработке
Декларативные языки, такие как HTML и CSS, играют важную роль в веб-разработке. Они предоставляют средства для создания и стилизации веб-страниц, облегчая процесс разработки и повышая эффективность работы.
HTML (HyperText Markup Language) используется для создания структуры и основного содержимого веб-страниц. Он определяет элементы как заголовки, параграфы, списки, изображения и другие, позволяя разработчикам легко организовывать информацию на странице. HTML является декларативным языком, потому что предоставляет правила, как структурировать содержимое, а не указывает, как именно его отобразить. Браузеры и другие программы, затем интерпретируют HTML и рендерят страницу соответствующим образом.
CSS (Cascading Style Sheets) — язык стилей, используется для задания внешнего вида веб-страниц. С его помощью можно управлять цветами, шрифтами, размерами, положением элементов и другими аспектами визуального представления страницы. CSS также является декларативным языком, потому что разработчики описывают, как элементы должны выглядеть и быть размещены, а браузеры затем применяют эти стили к соответствующим элементам.
Благодаря декларативному подходу, разработчики могут фокусироваться на структуре и стиле веб-страницы, не задумываясь о том, как именно браузер интерпретирует и отображает контент. Это делает процесс разработки более легким и эффективным, позволяя сосредоточиться на качестве и функциональности веб-сайта.
В целом, декларативные языки, такие как HTML и CSS, играют ключевую роль в веб-разработке, облегчая создание и стилизацию веб-страниц. Благодаря своей простоте и эффективности, они являются основой веб-технологий и позволяют создавать красивые и пользовательские интерфейсы для интернета.
Основные принципы HTML
Основные принципы HTML включают:
| Теги | Теги представляют собой ключевые элементы HTML и используются для обозначения различных частей содержимого веб-страницы. Каждый тег обычно имеет открывающий и закрывающий тег, и внутри них находится само содержимое страницы. |
| Атрибуты | Атрибуты добавляют дополнительную информацию к элементам HTML. Они используются для установки значений или свойств элементов и обычно записываются в открывающем теге. |
| Элементы | Элементы HTML состоят из открывающего тега, содержимого и закрывающего тега. Они определяют структуру и семантику страницы и используются для форматирования текста, вставки изображений, создания таблиц и других элементов. |
| Структура | HTML-страница обычно состоит из заголовка, основного содержимого и подвала. Заголовок содержит информацию о странице, такую как название и описание. Основное содержимое включает в себя текст, изображения, таблицы и другие элементы. Подвал обычно содержит дополнительную информацию, такую как ссылки на авторскую информацию или контакты. |
Понимание основных принципов HTML помогает в создании структурированного и доступного контента для веб-страниц и обеспечивает правильное отображение информации в браузере.
Структура HTML-документа
HTML-документ представляет собой текстовый файл, который содержит разметку веб-страницы. Он состоит из нескольких основных частей:
1. — указывает тип документа и версию HTML, которую следует использовать;
2. — корневой элемент документа, содержащий все остальные элементы;
3.
— содержит метаинформацию о документе, такую как заголовок страницы, подключенные стили, скрипты и другие метатеги;
4.
— определяет заголовок страницы, который отображается в названии вкладки браузера или в поисковых результатах;</p><p>5.<body> — содержит основное содержимое веб-страницы, такие как текст, изображения, таблицы, ссылки и другие элементы;</p><p>6. Элементы контента — это различные элементы, такие как</p><h1 id="p-dlya-zagolovkov-p-dlya-abzatsev-dlya-izobrazheniy">—<h6> для заголовков,<p>для абзацев, <img> для изображений, <a> для ссылок и т. д.;</p><p>7. Закрывающие теги — каждый открывающий тег должен быть закрыт соответствующим закрывающим тегом для правильной структуры;</p><p>8. Комментарии — можно добавлять комментарии в код для пояснения или временного исключения некоторых частей.</p><h2 id="tegi-atributy-i-znacheniya">Теги, атрибуты и значения</h2><p>HTML состоит из разнообразных тегов, которые позволяют описывать структуру и содержимое веб-страницы. Каждый тег имеет свои атрибуты, которые задают дополнительные параметры или свойства элемента. Значения атрибутов определяются в соответствии с их предназначением и требованиями языка.</p><p>Теги являются основными строительными блоками HTML и используются для создания различных элементов на странице. Например, тег</p><p>используется для создания абзацев, а</p><table> — для создания таблиц.<p>Атрибуты добавляют дополнительную информацию к тегам и определяют их поведение или визуальное представление. Например, атрибут «href» используется в теге <a> для указания адреса ссылки, атрибут «src» — в теге <img> для указания пути к изображению.</p><table><tr><th>Тег</th><th>Атрибуты</th><th>Пример значения атрибута</th></tr><tr><td></td><td>align, class, id, style</td><td>left, center, right</td></tr><tr><td><a></td><td>href, target, rel, download</td><td>«https://example.com», «_blank», «nofollow», «true»</td></tr><tr><td><img></td><td>src, alt, width, height</td><td>«image.jpg», «Alternate text», «200», «150»</td></tr></table><p>Значение атрибута — это информация, передаваемая в атрибут, которая определяет его конкретное свойство или действие. Значение может быть текстовым, числовым или состоять из других элементов языка.</p><p>Комбинация тегов, атрибутов и значений позволяет создавать разнообразный и интерактивный контент на веб-страницах. Правильное использование и сочетание этих элементов является ключевым фактором для создания качественного HTML-кода и улучшения визуального представления страницы.</p><h2 id="osnovnye-printsipy-css">Основные принципы CSS</h2><p>Основные принципы CSS включают:</p><p><strong>1. Каскадность:</strong> Каскадность определяет, как браузер применяет стили к элементам. Если два правила CSS применяются к одному элементу, то браузер выбирает правило с более высоким приоритетом. Приоритет определяется иерархией селекторов и весом строгости.</p><p><strong>2. Наследование:</strong> Наследование позволяет элементам наследовать стили от своих родительских элементов. Например, если устанавливается шрифт для тега <body>, все вложенные элементы будут наследовать этот шрифт, если не будет явно задан другой.</p><p><strong>3. Селекторы:</strong> Селекторы используются для выбора элементов, к которым будут применяться стили. Селекторы могут быть основаны на классах, идентификаторах, типах элементов и их атрибутах.</p><p><strong>4. Блочная и строчная модель:</strong> Блоки и строчные элементы имеют разное поведение при установке размеров и расположении. Блочные элементы занимают всю доступную ширину, а строчные элементы занимают только необходимую ширину для своего содержимого.</p><p><strong>5. Бокс-модель:</strong> Бокс-модель определяет расположение и размер элемента на странице. Он состоит из контента, границы, отступов и поля.</p><p><strong>6. Раскладка:</strong> Раскладка определяет размещение элементов на странице. Раскладку можно изменять с помощью свойств, таких как позиционирование, отступы и анимации.</p><p><em>Важно понимать основные принципы CSS для создания эффективных и красивых веб-страниц.</em></p><h2 id="selektory-v-css">Селекторы в CSS</h2><p>Селекторы в CSS позволяют выбирать элементы на веб-странице с использованием различных атрибутов, классов или идентификаторов. Селекторы могут быть очень простыми — они могут выбирать элементы по тегу или классу, или более сложными — они могут выбирать элементы, удовлетворяющие определенным условиям, таким как иерархия или соседство.</p><p>Некоторые из самых распространенных селекторов в CSS:</p><ul><li><strong>Селектор по тегу:</strong> выбирает все элементы определенного тега на странице. Например, селектор «p» выбирает все элементы <em><p></em>.</li><li><strong>Селектор по классу:</strong> выбирает все элементы, у которых есть определенный класс. Например, селектор «.red» выбирает все элементы с классом «red».</li><li><strong>Селектор по идентификатору:</strong> выбирает единственный элемент с определенным идентификатором. Например, селектор «#header» выбирает элемент с идентификатором «header».</li><li><strong>Селектор потомка:</strong> выбирает элементы, которые являются потомками определенного элемента. Например, селектор «div p» выбирает все элементы <em><p></em> внутри элементов <em><div></em>.</li><li><strong>Селектор соседа:</strong> выбирает элементы, которые являются соседними по отношению к другому элементу. Например, селектор «h1 + p» выбирает первый элемент <em><p></em> после элемента <em><h1></em>.</li></ul><p>Это только некоторые из множества селекторов, которые можно использовать в CSS. Знание и понимание селекторов позволяет более точно управлять стилями на веб-странице и создавать эффекты, отвечающие требованиям дизайна.</p><h2 id="stilizatsiya-s-pomoschyu-svoystv-i-znacheniy">Стилизация с помощью свойств и значений</h2><p>Свойство <strong>color</strong> позволяет задать цвет текста, используя различные значения, такие как названия цветов (например, «red», «blue») или цвета в шестнадцатеричном формате (например, «#FF0000» для красного цвета).</p><p>Свойства <strong>font-size</strong> и <strong>font-family</strong> позволяют установить размер текста и выбрать шрифт для отображения текста соответственно. Значениями для свойства <strong>font-size</strong> могут быть числа, пиксели или проценты, а значениями для <strong>font-family</strong> — имена шрифтов или типы шрифтов, такие как «sans-serif» или «monospace».</p><p>Свойства <strong>background-color</strong> и <strong>background-image</strong> позволяют установить цвет фона элемента и задать изображение, которое будет использоваться в качестве фона соответственно. Значением для <strong>background-color</strong> может быть название цвета или цвет в шестнадцатеричном формате, а для <strong>background-image</strong> — путь к изображению.</p><p>Свойство <strong>border</strong> позволяет установить границу вокруг элемента. Значением для <strong>border</strong> может быть толщина границы, ее стиль (например, «solid», «dashed») и цвет границы.</p><p>С помощью свойства <strong>text-align</strong> можно выравнивать текст по горизонтали, используя значения «left», «center» или «right». А свойство <strong>text-decoration</strong> позволяет добавить декоративные эффекты к тексту, такие как подчеркивание, зачеркивание и линия над текстом.</p><p>Это лишь некоторые из свойств и значений, доступных в CSS, которые используются для стилизации элементов веб-страницы. Используя и комбинируя эти свойства, разработчики могут создавать уникальные и привлекательные дизайны для веб-сайтов.</p><h2 id="semanticheskie-elementy-html">Семантические элементы HTML</h2><p>HTML предоставляет ряд семантических элементов, которые позволяют структурировать содержимое веб-страницы с точки зрения его смысла и семантики.</p><ul><li><strong><header></strong> — определяет заголовок или контейнер для представления содержимого верхней части веб-страницы.</li><li><strong><nav></strong> — предназначен для создания навигационной панели или меню.</li><li><strong><main></strong> — задаёт основное содержимое документа, которое должно быть уникальным для данной страницы.</li><li><strong><article></strong> — определяет независимый от остального контента блок, например, новость или статью.</li><li><strong><section></strong> — определяет раздел документа, может использоваться как контейнер для связанных по смыслу элементов.</li><li><strong><aside></strong> — задаёт боковую дополнительную информацию, которая не является основным содержимым страницы.</li><li><strong><footer></strong> — определяет подвал документа или раздела, который обычно содержит авторские права, контактную информацию и ссылки на связанные ресурсы.</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="192652" 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/html-i-css-klyucevye-yazyki-dlya-sozdaniya-i-oformleniya-veb-saitov/" data-title="HTML и CSS — ключевые языки для создания и оформления веб-сайтов" data-description="HTML и CSS — это два основных декларативных языка, используемых для создания веб-страниц. HTML, или HyperText Markup Language, отвечает за разметку контента на странице, в то время как CSS, или Cascading Style Sheets, определяет стиль и внешний вид этого контента. 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/html-i-css-klyucevye-yazyki-dlya-sozdaniya-i-oformleniya-veb-saitov/" content="HTML и CSS — ключевые языки для создания и оформления веб-сайтов"><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/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-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/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/ya-ustala-byt-silnoi-kak-naiti-put-k-scastyu/">Я устала быть сильной — как найти путь к счастью</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://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/prostye-sagi-deaktivacii-klyuca-v-igre-mai-sammer-bez-lisnix-zatrat-i-bez-xlopot/">Простые шаги деактивации ключа в игре Май Саммер без лишних затрат и без хлопот</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-serstyanaya-odezda-lucse-soxranyaet-teplo/">Почему шерстяная одежда лучше сохраняет тепло</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-ogurcy-ne-zakisayut-pri-zasolke/">Почему огурцы не закисают при засолке</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/rassifrovka-snovidenii-o-tolpe-lyudei-v-pomeshhenii-znacenie-snov-tainy-massovyx-snovidenii/">Расшифровка сновидений о толпе людей в помещении — значение снов, тайны массовых сновидений</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"> © 2024 profi-velo.ru</div></div></div></footer></div></div> <script>document.addEventListener("copy", (event) => {var pagelink = "\nИсточник: https://profi-velo.ru/blog/html-i-css-klyucevye-yazyki-dlya-sozdaniya-i-oformleniya-veb-saitov";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":"d583955897"};</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>