Html структура кода: 02. Структура HTML-кода

Leave a Comment / Html / By /

Базовая структура | HTML | CodeBasics

Любой HTML-документ можно разбить на несколько основных составляющих:

  • Блок head, содержащий метаинформацию о нашем сайте. Данные из этого блока не отображаются непосредственно на странице, а служат для её описания, подключения стилей и скриптов.
  • Блок body является основным местом, где строится HTML-разметка. Данные в этом блоке будут обработаны и выведены в браузер.

Простейшая разметка в HTML5 выглядит следующим образом:

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <title>Базовая разметка HTML</title>
</head>
<body>
  <h2>Code Basics</h2>
  <p>Бесплатные уроки по программированию и HTML для новичков</p>
</body>
</html>

Обратите внимание на первую строку <!DOCTYPE html>. DOCTYPE (document type) — служебная информация для браузера, где описывается стандарт HTML, который нужно обработать.

Текущий стандарт HTML5 поддерживается всеми браузерами, поэтому достаточно указать в первой строке документа <!DOCTYPE html>, который говорит, что наш документ размечен по стандарту HTML5.

Далее открывается парный тег <html> с атрибутом lang="ru". Указание языка также необходимо для браузеров, особенно если сайт рассчитан на массовую аудиторию, в том числе и за рубежом.

Во избежание ошибок, обе вышеописанные конструкции, при их отсутствии, будут добавлены браузером автоматически. В некоторых ситуациях браузеры могут добавить не те строки, которые вы бы хотели, и вместо обработки страницы по стандарту HTML5 браузер будет обрабатывать всё как HTML4, что приведёт ко множеству проблем, так как старые стандарты могут не знать о существовании многих тегов, таких как <main>, <nav> и так далее

Скопируйте базовую разметку HTML из примера выше. Внутри тега

<body> вставьте любую разметку. Попробуйте различные теги из тех, которые были пройдены в предыдущих курсах.

Упражнение не проходит проверку — что делать? 😶

Если вы зашли в тупик, то самое время задать вопрос в «Обсуждениях». Как правильно задать вопрос:

  • Обязательно приложите вывод тестов, без него практически невозможно понять что не так, даже если вы покажете свой код. Программисты плохо исполняют код в голове, но по полученной ошибке почти всегда понятно, куда смотреть.
В моей среде код работает, а здесь нет 🤨

Тесты устроены таким образом, что они проверяют решение разными способами и на разных данных. Часто решение работает с одними входными данными, но не работает с другими. Чтобы разобраться с этим моментом, изучите вкладку «Тесты» и внимательно посмотрите на вывод ошибок, в котором есть подсказки.

Мой код отличается от решения учителя 🤔

Это нормально 🙆, в программировании одну задачу можно выполнить множеством способов. Если ваш код прошел проверку, то он соответствует условиям задачи.

В редких случаях бывает, что решение подогнано под тесты, но это видно сразу.

Прочитал урок — ничего не понятно 🙄

Создавать обучающие материалы, понятные для всех без исключения, довольно сложно. Мы очень стараемся, но всегда есть что улучшать. Если вы встретили материал, который вам непонятен, опишите проблему в «Обсуждениях». Идеально, если вы сформулируете непонятные моменты в виде вопросов. Обычно нам нужно несколько дней для внесения правок.

Кстати, вы тоже можете участвовать в улучшении курсов: внизу есть ссылка на исходный код уроков, который можно править прямо из браузера.

←Предыдущий

Следующий→

Нашли ошибку? Есть что добавить? Пулреквесты приветствуются https://github.com/hexlet-basics

Структура HTML-документа

Создаём простейшую HTML-страницу, разбираемся из каких тегов она состоит и за что эти теги отвечают. Подключаем к странице CSS-стили и JS-скрипты.

×

Курс «Структура HTML-документа»

Каждый HTML-документ должен начинаться с декларации типа документа или «доктайпа». Тип документа нужен, чтобы браузер мог определить версию HTML и правильно отобразить страницу.

Например, для старой версии HTML 4.01 доктайп выглядит так:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">

А для последней версии HTML уже намного проще:

<!DOCTYPE html>

Последнюю версию HTML ещё называют HTML 5. Но так как эта версия уже принята как стандарт и распространена почти везде, мы будем называть её просто HTML.

×

Курс «Структура HTML-документа»

Простейшая HTML-страница состоит как минимум из трёх тегов.

Тег <html> — это контейнер, в котором находится всё содержимое страницы, включая теги <head> и <body>. Как правило, тег <html> идёт в документе вторым после доктайпа.

Тег <head> предназначен для хранения других элементов, цель которых — помочь браузеру в работе с данными. Содержимое этого тега не отображается напрямую.

Тег <body> предназначен для хранения содержания веб-страницы (контента), отображаемого в окне браузера.

×

Курс «Структура HTML-документа»

Заголовок страницы — это тот текст, который отображается в левом верхнем углу браузера, а также во вкладках.

Чтобы задать заголовок страницы, нужно использовать тег <title> внутри тега <head>. Например, вот так:

<head>
  <title>Курсы — HTML Academy</title>
</head>

×

Курс «Структура HTML-документа»

Кодировку HTML-страницы нужно указывать для того, чтобы веб-браузер мог правильно отображать текст на странице. Если браузер неправильно «угадает» кодировку, то вместо текста будут отображаться иероглифы.

Чтобы сообщить браузеру кодировку HTML-страницы, необходимо внутри тега <head> использовать тег:

<meta charset="имя кодировки">

Самая распространённая современная кодировка — utf-8.

Используйте её во всех своих проектах.

Для кириллицы в Windows charset часто задавали как windows-1251. Но сейчас это считается плохой практикой.

×

Курс «Структура HTML-документа»

Есть целое семейство тегов <meta>, называемых мета-тегами. Их можно использовать внутри тега <head>.

Мета-теги различаются набором атрибутов и их значений, вот некоторые из атрибутов: content, http-equiv, name и scheme.

Мета-теги хранят полезную для браузеров и поисковых систем информацию. Один из таких тегов — это описание ключевых слов страницы. Задаётся он так:

<meta name="keywords" content="разные, ключевые, слова">

В атрибуте content через запятую перечисляются самые важные слова из содержания страницы. Раньше этот тег был очень важен для поисковиков. Каково положение дел сейчас — большой секрет Яндекса и Гугла.

×

Курс «Структура HTML-документа»

Ещё один полезный для поисковых систем мета-тег — краткое описание страницы. Оно задаётся так:

<meta name="description" content="краткое описание">

В атрибуте content должно быть краткое содержание или аннотация страницы. Оно часто используется поисковиками при отображении результатов поиска.

Пойманный нами инженер из Яндекса не признался, важен ли этот тег для ранжирования, но дал ссылку на рекомендации по составлению описаний. Инженера из Гугла мы ещё только выслеживаем, так что следите за новостями.

×

Курс «Структура HTML-документа»

Комментарий в HTML-коде задаётся так:

<!-- любой текст -->

Текст внутри комментария не отображается браузером на странице. Комментарии обычно используются в следующих случаях:

  • Для комментирования кода. Всегда полезно оставить подсказку.
  • Для временного отключения кода. Удалять код неудобно, так как его надо будет восстанавливать, а закомментировать и потом раскомментировать — самое лучшее решение.

Комментарии можно использовать в любом месте страницы, кроме тега <title> — внутри него они не работают. Внутри тега <style> HTML-комментарии тоже не работают, так как в CSS код комментируется другим способом, о котором вы узнаете в курсе «Знакомство с CSS».

Чтобы быстро закомментировать или раскомментировать строку кода в HTML или CSS редакторе, можете использовать сочетание клавиш

ctrl + / или cmd + /.

×

Курс «Структура HTML-документа»

CSS-стили можно писать внутри HTML-кода страницы или подключать их как внешний файл.

В первом случае стили называются «встроенными» или «инлайновыми», а писать их нужно внутри тега <style>. Этот тег обычно размещают внутри <head>. Например:

<head>
  <style>
    CSS-код
  </style>
</head>

Внутри <style> пишут обычный CSS-код.

Инлайновые стили используют не так часто, например, для оптимизации скорости загрузки страницы. Чаще используют внешние стили, c которыми мы познакомимся позже.

×

Курс «Структура HTML-документа»

Теперь вы знаете про встроенные стили и можете узнать тайну нашего CSS-редактора.

CSS-код из редактора незаметно добавляется внутрь тега <style>, а этот тег добавляется в мини-браузер.

В этом задании CSS-стили такие же, как и в предыдущем, но вынесены в CSS-редактор и закомментированы. Комментарии в CSS работают так же, как в HTML — позволяют временно отключить какой-то кусок кода.

CSS-комментарии задаются с помощью символов /* и */:

/*
h2 {
  color: red; 
}
*/

×

Курс «Структура HTML-документа»

Чаще всего стили подключают из внешнего файла с расширением . css. Для этого используется тег <link>. Например:

<head>
  <link href="style.css" rel="stylesheet">
</head>

В атрибуте href задают адрес файла, а атрибут rel="stylesheet" говорит браузеру, что мы подключаем стили, а не что-то другое.

Лучше подключать стили внутри <head>, но это необязательно. Тег <link> будет работать и в другом месте страницы.

В этом задании вы подключите внешний стилевой файл, который расположен по адресу /assets/course2/style.css щёлкните по ссылке, чтобы открыть этот файл в браузере.

×

Курс «Структура HTML-документа»

В вебе следующее разделение ролей: HTML отвечает за структуру документа, стили — за его внешний вид, а скрипты — за поведение. С помощью скриптов, например, можно «оживлять» страницу, добавляя анимацию и другие эффекты. Скрипты создаются с помощью языка JavaScript.

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

Встроенные скрипты пишут внутри тега <script>. Например:

<script>
  JavaScript-код
</script>

Тег <script> можно использовать в любом месте HTML-документа, но лучше вставлять его в самом конце перед закрывающим тегом </body>.

Часть возможностей JavaScript постепенно переходит в CSS, например, возможность задавать плавное изменение значений свойств. Вы увидите это в задании.

×

Курс «Структура HTML-документа»

Скрипты чаще всего подключают из внешних файлов с расширением .js. Для этого используют тег <script> с атрибутом src, в котором указывается путь к файлу. Например:

<script src="scripts. js"></script>

Обратите внимание, что тег <script> парный. Если вы подключаете внешние скрипты, то просто ничего не пишите внутри тега.

Внешние скрипты лучше подключать перед закрывающим тегом </body>.

Внешние скрипты так же, как и внешние стили, используются намного чаще встроенных.

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

А ещё внешние ресурсы кешируются браузером, что позволяет ускорить загрузку страниц. А в вебе это важно.

В этом задании вы подключите внешний скрипт, который расположен по адресу: /assets/course2/scripts.js щёлкните по ссылке, чтобы открыть этот файл в браузере.

×

Курс «Структура HTML-документа»

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

Пришло время повторить изученное и выполнить два более сложных задания.

В первом задании закрепим навыки описания мета-информации:

  • заголовка страницы;
  • ключевых слов;
  • краткого описания страницы.

Прочитайте анонс статьи в мини-браузере и дополните его важной мета-информацией.

Самостоятельно задайте мета-информацию страницы:

  1. Цель 1 Заголовок страницы Вёрстка для не-технарей.
  2. Цель 2 Ключевые слова вёрстка, компьютерная грамотность, программирование.
  3. Цель 3 Краткое описание Примеры того, что изучение веб-технологий может быть полезно для всех.

×

Курс «Структура HTML-документа»

Во втором итоговом задании вам нужно самостоятельно подключить к странице внешние ресурсы:

  • Стилевой файл /assets/course2/final.css.
  • Файл со скриптами /assets/course2/final. js.

Не забывайте, что хорошим тоном считается подключать внешние стили в <head>, а скрипты перед закрывающим тегом </body>.

В подключаемых файлах — демонстрация возможностей CSS и JavaScript, которые мы будем изучать в дальнейшем.

  1. Цель 1 Подключите стилевой файл /assets/course2/final.css.
  2. Цель 2 Затем подключите скрипт /assets/course2/final.js.

Курс HTML | Структура HTML-документа

ВВЕДЕНИЕ

Как мы все знаем, HTML — это язык Интернета. Он используется для разработки веб-страниц или, можно сказать, структурирования макетов страниц веб-сайта. HTML расшифровывается как HYPERTEXT MARKUP LANGUAGE, поскольку его полная форма предполагает, что это не язык программирования, а язык разметки. Таким образом, при выполнении HTML-кода мы не можем столкнуться ни с одной такой ошибкой. В реальном HTML код не компилировался и не интерпретировался, потому что HTML код отображался браузером. что похоже на компиляцию программы. Содержимое HTML обрабатывается через браузер для отображения содержимого HTML.

Навигация по курсу  
 

СТРУКТУРА ДОКУМЕНТОВ HTML

Html использует предопределенные теги и атрибуты шрифта и атрибуты для указания браузеру, какой формат, стиль и средства отображать содержимое. Html — это язык, нечувствительный к регистру. Нечувствителен к регистру означает, что нет разницы между прописными и строчными буквами (заглавными и строчными буквами), которые обрабатываются одинаково, например, «D» и «d» здесь одинаковы.
Обычно в HTML есть два типа тегов: 
 

  1. Парные теги : Эти теги идут парами. То есть они имеют как открывающий (< >), так и закрывающий () теги.
  2. Пустые теги : Эти теги не требуют закрытия.

Ниже приведен пример тега () в HTML, который указывает браузеру выделить текст внутри него жирным шрифтом.
 

Теги и атрибуты: Теги представляют собой отдельные элементы HTML-структуры, мы должны открывать и закрывать любой тег косой чертой, например

. Есть несколько вариантов с тегом, некоторые из них являются самозакрывающимися тегами, которые не требуется закрывать, а некоторые являются пустыми тегами, в которые мы можем добавить любые атрибуты. Атрибуты — это дополнительные свойства html-тегов, определяющие свойства любых html-тегов. то есть ширина, высота, элементы управления, циклы, ввод и автовоспроизведение. Эти атрибуты также помогают нам хранить информацию в метатегах, используя атрибуты имени, содержимого и типа. HTML-документы структурированы ниже: 
 

Структура HTML-документа

HTML-документ в основном делится на две части:
 

  • HEAD : содержит информацию о HTML-документе. Например, заголовок страницы, версия HTML, метаданные и т. д.
  • BODY : содержит все, что вы хотите отобразить на веб-странице.

Структура HTML-документа

Давайте теперь посмотрим на базовую структуру HTML. Это код, который должен быть на каждой веб-странице: 
 

 

< html lang = "en" >

    

< Голова >

< Meta = Meta = = = 0075 "UTF-8" >

< Мета HTTP-EQUIV = "X-UPATIL" = "x-U-Compatible" = "x-u >

< Мета Имя = "Viewport" . >

    

     < meta name = "author" content = "Mr.X" >

     < Meta Название = "LinkedIn Profile" Содержание = "0005

< Meta Название = "Описание"

Содержание = "ATER PLATE до Plate To To To Plate To To Plate To To Place To To To Place.

     < title >GeeksforGeeks title >

7 0 9 0075 head >

< body >

    

     < h2 >GeeksforGeeks h2 >

< p >Портал информатики для гиков p >

body >

html >

Каждая веб-страница должна содержать этот код. Ниже приводится полное объяснение каждого из тегов, используемых в приведенном выше фрагменте HTML-кода:
: Этот тег используется для указания версии HTML. В настоящее время это говорит о том, что версия HTML 5.0 
  : является корневым элементом html. Это самый большой и основной элемент в полном языке html, все теги, элементы и атрибуты, заключенные в нем, или, можно сказать, обертка init, которая используется для структурирования веб-страницы. Тег является родительским тегом для тегов и   , других тегов, заключенных в теги и. В теге мы используем атрибуты «lang» для определения языков html-страницы, например, здесь en представляет английский язык. некоторые из них: es = испанский, zh-Hans = китайский, fr = французский и el = греческий и т. д.
: Тег заголовка содержит метаданные, заголовок, CSS страницы и т. д. Данные, хранящиеся в теге, не отображаются пользователю, они просто записываются для справочных целей и в качестве водяного знака владельца.

  Примечание:  для лучшего понимания см. выше код html.  </strong> = для хранения имени веб-сайта или отображаемого контента. <strong> <ссылка> </strong> = Чтобы добавить/связать файл css (каскадная таблица стилей). <strong> <мета> </strong> = 1. для хранения данных о сайте, организации,
Владелец создатель
 2. для адаптивного сайта через атрибуты
 3. указать совместимость html с браузером <strong> <script></strong>=добавить файл javascript.</pre><p><strong><body>:</strong>Тег body используется для включения всех данных веб-страницы от текстов до ссылок.Весь контент,который вы видите в браузере,содержится в этом элементе.Следующие теги и элементы,используемые в теле.</p><p>   1.<h2><span class="ez-toc-section"id="i">,</span></h2><h3><span class="ez-toc-section"id="i-2">,</span></h3><h4><span class="ez-toc-section"id="i-3">до</span></h4><h6></h6><br/>   2. <p><br/>   3. <div>и<span><br/>   4. <b>,<i>и<u> <br/>   5. <li>,<ul>и<ol>.<br/>   6. <img>,<audio>,<video>и<iframe><br/>   7. <table><th>,<thead>и<tr>.<img class="lazy lazy-hidden"loading='lazy'src="//xn--90abhccf7b.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif"data-lazy-type="image"data-src='/800/600/http/cf.ppt-online.org/files/slide/3/39QvtmTyu68dJI4ngxVYkHGhzD7rCFLlNiEKaS/slide-17.jpg'/><noscript><img loading='lazy'src='/800/600/http/cf.ppt-online.org/files/slide/3/39QvtmTyu68dJI4ngxVYkHGhzD7rCFLlNiEKaS/slide-17.jpg'/></noscript><br/>   8. <form> <br/>   9. <label>и<input>другие……….<br/><strong>Дополнительные сведения о структуре HTML-документа см.на странице 9.0004: <br/> </p><ul><li>https:</p><p>Сохранить статью</p><p>Статьи по теме</p><h2><span class="ez-toc-section"id="_HTML-2">Структура HTML – Инженерно-технические услуги</span></h2><p><h3><span class="ez-toc-section"id="i-4">Обзор</span></h3></p><p>Файлы HTML(HyperText Markup Language)— это,по сути,простые текстовые файлы,которые можно создать в любом текстовом редакторе.Но для корректного отображения во всемирной паутине HTML-документ должен быть правильно структурирован.Любое отклонение от этой структуры приведет к тому,что многие веб-браузеры будут отображать содержимое неправильно или вообще не отображать.<img class="lazy lazy-hidden"loading='lazy'src="//xn--90abhccf7b.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif"data-lazy-type="image"data-src='/800/600/http/images.myshared.ru/6/726137/slide_3.jpg'/><noscript><img loading='lazy'src='/800/600/http/images.myshared.ru/6/726137/slide_3.jpg'/></noscript>Кроме того,все HTML-документы должны иметь суффикс «html»,чтобы HTML-код правильно отображался веб-браузером.</p><p>Нормотворческий орган Сети,люди,которые определяют эту структуру,— это Консорциум Всемирной паутины(W3C).Веб-браузеры должны максимально точно следовать этим стандартам.По большей части все они работают хорошо,но некоторые браузеры не достигают этой цели(Internet Explorer является худшим виновником).Тем не менее,при создании веб-страницы лучше всего следовать текущим веб-стандартам.Это обеспечит просмотр вашего сайта в как можно большем количестве браузеров.Все HTML-инструкции на этом сайте ETS соответствуют стандартам W3C.</p><p><h3><span class="ez-toc-section"id="i-5">Пример</span></h3></p><p data-readability-styled="true"><code><!DOCTYPE HTML><br/><html><br/><head><br/><meta charset=utf-8"> <br/> <title>Простой пример HTML 
  
  
  
 
Это заголовок
 
 
Это абзац, центрированный на странице.
 Некоторые теги могут также включать атрибут, представляющий собой дополнительную информацию, включенную только в начальный тег. Атрибуты специфичны для каждого тега, хотя есть много общего. Некоторые теги должны иметь атрибут для правильной работы. Пример атрибута показан в теге первого абзаца, показанном в примере выше (     .) Веб-стандарты предполагают, что все параметры атрибутов заключаются в кавычки. Например, это неправильно:  
  
 Закрывающие теги 
 Кроме того, все вложенные теги HTML должны заканчиваться в порядке, обратном их созданию. Например, это неверно:  
Этот заголовок выделен жирным шрифтом и курсивом   Поскольку тег  
  был создан первым, он должен быть закрыт последним, а поскольку тег      был создан последним, его необходимо закрыть первым. Все теги должны открываться и закрываться друг в друге, как набор русских матрешек.
 Вот правильный пример:  
Этот заголовок выделен жирным шрифтом и курсивом  
 Размещение тега 
 На веб-странице некоторые теги HTML необходимы для правильного отображения страницы. Это теги     ,     ,   </strong> </code> и <code> <strong><body> </strong> </code> . Теги <code> <strong><html> </strong> </code> должны начинать и заканчивать документ, а теги <code> <strong><head> </strong> </code> должны стоять перед тегами <code> <strong><body> </strong> </code>. Кроме того, <code> <strong><title> </strong> </code> теги должны находиться внутри тегов <code> <strong><head> </strong> </code>. Ниже приводится простое объяснение каждого из этих тегов:</p><ul><li> <code> <strong><html> </strong> </code> Этот тег и его закрывающий тег должны быть первым тегом (после Doctype) и последним тегом в вашем документе. Он сообщает браузеру, что все, что содержится в этих тегах, следует рассматривать как информацию в HTML-коде и соответственно анализировать браузером.</li><li> <code> <strong><head> </strong> </code> Этот тег и его закрывающий тег выделяют раздел вашего документа, который не будет виден на вашей веб-странице, но поможет браузеру в работе с документом.<img class="lazy lazy-hidden" loading='lazy' src="//xn--90abhccf7b.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/images.myshared.ru/10/984386/slide_6.jpg' /><noscript><img loading='lazy' src='/800/600/http/images.myshared.ru/10/984386/slide_6.jpg' /></noscript></div></div></div></article><nav class="navigation post-navigation" aria-label="Записи"><h2 class="screen-reader-text">Навигация по записям</h2><div class="nav-links"><div class="nav-previous"><a href="https://xn--90abhccf7b.xn--p1ai/raznoe/poisk-nishi-poisk-nish-dlya-biznesa-cherez-keycollector-prodolzhenie-marketing-na-vc-ru.html" rel="prev">Поиск ниши: Поиск ниш для бизнеса через KeyCollector — продолжение — Маркетинг на vc.ru</a></div><div class="nav-next"><a href="https://xn--90abhccf7b.xn--p1ai/html/html-sozdanie-sajta-onlajn-sozdat-sajt-onlajn-igry-samomu-besplatno-konstruktor-sajtov-a5.html" rel="next">Html создание сайта онлайн: Создать сайт онлайн игры самому бесплатно — Конструктор сайтов А5</a></div></div></nav><div id="comments" class="comments-area"><div id="respond" class="comment-respond"><h3 id="reply-title" class="comment-reply-title">Добавить комментарий <small><a rel="nofollow" id="cancel-comment-reply-link" href="/html/html-struktura-koda-02-struktura-html-koda.html#respond" style="display:none;">Отменить ответ</a></small></h3><form action="https://xn--90abhccf7b.xn--p1ai/wp-comments-post.php" method="post" id="commentform" class="comment-form" novalidate><p class="comment-notes"><span id="email-notes">Ваш адрес email не будет опубликован.</span> <span class="required-field-message">Обязательные поля помечены <span class="required">*</span></span></p><p class="comment-form-comment"><label for="comment">Комментарий <span class="required">*</span></label><textarea id="comment" name="comment" cols="45" rows="8" maxlength="65525" required></textarea></p><p class="comment-form-author"><label for="author">Имя <span class="required">*</span></label> <input id="author" name="author" type="text" value="" size="30" maxlength="245" autocomplete="name" required /></p><p class="comment-form-email"><label for="email">Email <span class="required">*</span></label> <input id="email" name="email" type="email" value="" size="30" maxlength="100" aria-describedby="email-notes" autocomplete="email" required /></p><p class="comment-form-url"><label for="url">Сайт</label> <input id="url" name="url" type="url" value="" size="30" maxlength="200" autocomplete="url" /></p><p class="form-submit"><input name="submit" type="submit" id="submit" class="submit" value="Отправить комментарий" /> <input type='hidden' name='comment_post_ID' value='68393' id='comment_post_ID' /> <input type='hidden' name='comment_parent' id='comment_parent' value='0' /></p></form></div></div></main></div><div id="sidebar-primary" class="widget-area sidebar " role="complementary"><div class="sidebar-main"><div id="yandex_rtb_R-A-744004-7" class="yandex-adaptive classYandexRTB"></div>
<script type="text/javascript">
window.yaContextCb.push(()=>{Ya.Context.AdvManager.render({renderTo: "yandex_rtb_R-A-744004-7",blockId: "R-A-744004-7",pageNumber: 11,onError: (data) => { var g = document.createElement("ins");
                    g.className = "adsbygoogle";
                    g.style.display = "inline";
                        g.style.width = "300px";
                        g.style.height = "600px";
                        g.setAttribute("data-ad-slot", "9935184599");
                    g.setAttribute("data-ad-client", "ca-pub-1812626643144578");
                    g.setAttribute("data-alternate-ad-url", "https://chajnov.ru/back.php");
                    document.getElementById("yandex_rtb_[rtbBlock]").appendChild(g);
                    (adsbygoogle = window.adsbygoogle || []).push({}); }})});

window.addEventListener("load", () => {
var ins = document.getElementById("yandex_rtb_R-A-744004-7");
if (ins.clientHeight == "0") {
ins.innerHTML = stroke2;
}
}, true);
</script><section id="search-2" class="widget widget_search"><div class="zita-widget-content"><form role="search" method="get" id="searchform" action="https://xn--90abhccf7b.xn--p1ai/"><div class="form-content"> <input type="text" placeholder="search.." name="s" id="s" value=""/> <input type="submit" value="Search" /></div></form></div></section><section id="nav_menu-4" class="widget widget_nav_menu"><div class="zita-widget-content"><h2 class="widget-title">Рубрики</h2><div class="menu-2-container"><ul id="menu-2" class="menu"><li id="menu-item-19021" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-19021"><a href="https://xn--90abhccf7b.xn--p1ai/category/css">Css</a></li><li id="menu-item-19022" class="menu-item menu-item-type-taxonomy menu-item-object-category current-post-ancestor current-menu-parent current-post-parent menu-item-19022"><a href="https://xn--90abhccf7b.xn--p1ai/category/html">Html</a></li><li id="menu-item-19023" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-19023"><a href="https://xn--90abhccf7b.xn--p1ai/category/js">Js</a></li><li id="menu-item-19024" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-19024"><a href="https://xn--90abhccf7b.xn--p1ai/category/adaptiv">Адаптивный сайт</a></li><li id="menu-item-19025" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-19025"><a href="https://xn--90abhccf7b.xn--p1ai/category/verstk">Верстка</a></li><li id="menu-item-19026" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-19026"><a href="https://xn--90abhccf7b.xn--p1ai/category/idei">Идеи</a></li><li id="menu-item-19028" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-19028"><a href="https://xn--90abhccf7b.xn--p1ai/category/chego-nachat">С чего начать</a></li><li id="menu-item-19029" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-19029"><a href="https://xn--90abhccf7b.xn--p1ai/category/sovety">Советы</a></li><li id="menu-item-19031" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-19031"><a href="https://xn--90abhccf7b.xn--p1ai/category/shablon">Шаблоны</a></li><li id="menu-item-19027" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-19027"><a href="https://xn--90abhccf7b.xn--p1ai/category/raznoe">Разное</a></li></ul></div></div></section></div></div></div></div><footer id="zita-footer"><div class="footer-wrap widget-area"><div class="bottom-footer"><div class="bottom-footer-bar ft-btm-one"><div class="container"><div class="bottom-footer-container"> © Компания <a href="http://вебджем.рф"> Вебджем.рф </a> 2009 - 2024 | Все права защищены.</a></div></div></div></div></div></footer> <noscript><style>.lazyload{display:none}</style></noscript><script data-noptimize="1">window.lazySizesConfig=window.lazySizesConfig||{};window.lazySizesConfig.loadMode=1;</script><script async data-noptimize="1" src='https://xn--90abhccf7b.xn--p1ai/wp-content/plugins/autoptimize/classes/external/js/lazysizes.min.js'></script> <!-- noptimize -->
<style>iframe,object{width:100%;height:480px}img{max-width:100%}</style><script>new Image().src="//counter.yadro.ru/hit?r"+escape(document.referrer)+((typeof(screen)=="undefined")?"":";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth?screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+";h"+escape(document.title.substring(0,150))+";"+Math.random();</script>
<!-- /noptimize --></body></html>