Основные теги в html: Базовые теги в HTML

Базовые теги в HTML

❮ Назад Вперед ❯

Как мы уже отмечали ранее, теги заключаются в угловые скобки <>. В закрывающем теге также используется косая черта (слеш) </>. Ниже приведем теги, которые используются чаще других.

  • Теги <h2>-<h6> для заголовков
  • Тег <p> для обозначения абзаца
  • Тег <img/> для вставки изображений
  • Тег <a> для вставки ссылок

Теги <h2> to <h6> используются для структурирования заголовков. В HTML используются 6 уровней HTML заголовков, от <h2> до <h6>. <h2> используется для обозначения самого важного, а <h6> наименее важного заголовков.

Пример

<!DOCTYPE html>
<html>
   <head>
       <title>Заголовок окна веб-страницы </title>
   </head>
   <body>
      <h2>Заголовок первого уровня</h2>
      <h3>Заголовок второго уровня</h3>
      <h4>Заголовок третьего уровня</h4>
      <h5>Заголовок четвертого уровня</h5>
      <h5>Заголовок пятого уровня</h5>
      <h6>Заголовок шестого уровня</h6>
   </body>
</html>

Попробуйте сами!

Результат

Парный тег <p> используется для разграничения абзацев. Браузеры по умолчанию добавляют отступы до <p> и после </p>

Пример

<!DOCTYPE html>
<html>
   <head>
       <title>Заголовок окна веб-страницы </title>
   </head>
   <body>
      <h2>Пример использования тега &lt;br&gt;</h2>
      <p> Внутри абзаца мы можем вставить тег &lt;br /&gt;, <br /> чтобы перенести часть текста на другую строку в случае необходимости.</p>
</body>
</html>

Попробуйте сами!

Результат

Для вставки HTML изображений используется одинарный тег <img/>.

Пример

<!DOCTYPE html>
<html>
   <head>
       <title>Заголовок окна веб-страницы </title>
   </head>
   <body>
       <h2>Пример изображения</h2>
       <img src="/uploads/media/default/0001/01/25acddb3da54207bc6beb5838f65f022feaa81d7. jpeg" alt="Aleq"/>
  </body>
</html>

Попробуйте сами!

Результат

Для создания HTML ссылок используется тег <a> (также известный как анкор).

Пример

<!DOCTYPE html>
<html>
   <head>
       <title>Заголовок окна веб-страницы </title>
   </head>
   <body>
        <a href="https://www.w3docs.com/">https://ru.w3docs.com</a>
   </body>
</html>

Попробуйте сами!

Результат

Работа с основными HTML тегами и атрибутами для новичков

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

Блок . Структура простейшей страницы

Страница сайта — это обычный текстовый файл с расширением .html. Внутри этого файла и хранится текст HTML страницы вместе с тегами. Этот файл обязательно должен иметь следующие теги: тег <html>, который должен содержать в себе текст всего сайта (все, что написано вне этого тега, браузером будет проигнорировано), а внутри него должны быть еще два тега: тег <head> для служебного содержимого страницы и тег <body> — для основного текста, который и виден на экране браузера.

В служебное содержимое, которое располагается внутри тега <head>, входит много различных вещей, но пока нам нужны только две из них. Это тег <title>, задающий название страницы, которое будет видно во вкладке браузера, и тег <meta>, который задает кодировку страницы (она ставится в атрибуте charset и обычно имеет значение utf-8, подробнее об этом в видео, которое будет ниже на пару абзацев).

Кроме того, перед тегом <html> обычно пишется конструкция doctype, которая указывает версию языка HTML, на которой сделан сайт. Актуальная сейчас версия языка имеет номер пять и доктайп для нее должен выглядеть так — <!DOCTYPE html>.

Итак, давайте посмотрим на основную структуру страницы (чтобы запустить это пример в браузере — скопируйте его в текстовый файл с расширением .html и откройте в браузере, если у вас проблемы с этим — посмотрите видео под примером):

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Это заголовок тайтл</title>
	</head>
	<body>
		Это основное содержимое страницы.
</body> </html>

Как выглядит этот пример в браузере смотрите по данной ссылке.

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

Тут скоро будет видео как начать: как сохранить с расширением .html, структура страницы, кодировки.

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

Блок . Абзацы

Одним из основных элементов страницы являются абзацы. Их можно сравнить с абзацами в книге — каждый абзац начинается с новой строки и имеет так называемую красную строку (это когда первая строка текста абзаца немного отступает вправо). По умолчанию красной строки нет, но ее легко сделать (об этом чуть позже).

Абзац создается с помощью тега <p> таким образом:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Это заголовок тайтл</title>
	</head>
	<body>
		<p>
			Это абзац.
		</p>
		<p>
			Это еще один абзац.
		</p>
		<p>
			И еще один абзац.
		</p>
	</body>
</html>

Так код будет выглядеть в браузере:

Это абзац.

Это еще один абзац.

И еще один абзац.

Блок . Заголовки h2, h3, h4, h5, h5, h6

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

Заголовки создаются с помощью тегов <h2>, <h3>, <h4>, <h5>, <h5>, <h6>. Они имеют разную степень важности. В заголовке h2 следует располагать название всей HTML страницы, в h3 — название блоков страницы, в h4 — название подблоков и так далее.

Все заголовки по умолчанию жирные и имеют разный размер (это можно поменять через CSS, но об этом позже). Смотрите пример:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Это заголовок тайтл</title>
	</head>
	<body>
		<h2>Заголовок h2</h2>
		<h3>Заголовок h3</h3>
		<h4>Заголовок h4</h4>
		<h5>Заголовок h5</h5>
		<h5>Заголовок h5</h5>
		<h6>Заголовок h6</h6>
		<p>Это первый абзац.</p>
		<p>Это второй абзац.</p>
		<p>Это третий абзац. </p>
	</body>
</html>

Так код будет выглядеть в браузере:

Заголовок h3

Заголовок h4

Заголовок h5
Заголовок h5
Заголовок h6

Это первый абзац.

Это второй абзац.

Это третий абзац.

Блок . Жирный

Вы уже знаете, что заголовки по умолчанию жирные

. Однако, можно сделать жирным и обычный текст — достаточно взять его в тег <b>. Смотрите пример:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Это заголовок тайтл</title>
	</head>
	<body>
		<p>
			Это обычный текст, а это <b>жирный</b> текст.
		</p>
	</body>
</html>

Так код будет выглядеть в браузере:

Это обычный текст, а это жирный текст.

Обратите внимание на то, что тег <b> следует использовать внутри какого-либо другого тега, например абзаца. В этом случае абзацы создают общую структуру страницы (абзацы и заголовки), а тег b делает жирным отдельные кусочки текста.

Блок . Курсив

Кроме жирного можно сделать также и курсив с помощью тега <i>:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Это заголовок тайтл</title>
	</head>
	<body>
		<p>
			Это обычный текст, а это <i>курсивный</i> текст.
		</p>
	</body>
</html>

Так код будет выглядеть в браузере:

Это обычный текст, а это курсивный текст.

Блок . Списки

Наряду с абзацами и заголовками существует еще один важный элемент страницы — это списки. Такие элементы наверняка знакомы всем пользователям интернета. Они представляют собой перечисление чего-либо (список) по пунктам. Возле каждого пункта списка обычно стоит закрашенный кружок (он называется маркер списка).

Списки создаются с помощью тега <ul>, внутри которого обязательно должны идти теги <li>. Тег ul задает сам список, а в теги li следует ложить пункты списка (то есть одному li соответствует один маркер списка).

Имейте ввиду, что отдельно теги li использовать нельзя. Смотрите пример:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Это заголовок тайтл</title>
	</head>
	<body>
		<ul>
			<li>Первый пункт списка.</li>
			<li>Второй пункт списка.</li>
			<li>Третий пункт списка.</li>
		</ul>
	</body>
</html>

Так код будет выглядеть в браузере:

  • Первый пункт списка.
  • Второй пункт списка.
  • Третий пункт списка.

Списки, созданные через тег ul, называются неупорядоченными списками. Такое название им дано потому, что существуют еще и упорядоченные списки, у которых вместо маркеров-точек будут маркеры-цифры. Такие списки вместо тега ul имеют тег <ol>, а пункты таких списков также создаются через теги li.

Давайте сделаем упорядоченный список, используя тег ol:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Это заголовок тайтл</title>
	</head>
	<body>
		<ol>
			<li>Первый пункт списка. </li>
			<li>Второй пункт списка.</li>
			<li>Третий пункт списка.</li>
		</ol>
	</body>
</html>

Так код будет выглядеть в браузере:

  1. Первый пункт списка.
  2. Второй пункт списка.
  3. Третий пункт списка.

Удобство упорядоченных списков в том, что я могу вставить новый пункт списка в любое место — и нумерация сама перестроится (то есть мне не приходится за ней следить в случае каких-либо изменений, как было бы в том случае, если бы я расставлял ее вручную).

Блок . Ссылки

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

Ссылка создается с помощью тега <a>, при этом у нее должен быть обязательный атрибут href, в котором хранится адрес той страницы, на которую ведет ссылка. Смотрите пример:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Это заголовок тайтл</title>
	</head>
	<body>
		<a href="http://phphtml.net">Ссылка на сайт phphtml.net.</a>
	</body>
</html>

Так код будет выглядеть в браузере:

Ссылка на сайт phphtml.net.

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

Тут скоро будет видео про ссылки абсолютные и относительные

Блок . Картинки

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

Как это работает, посмотрим на следующем примере:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Это заголовок тайтл</title>
	</head>
	<body>
		<img src="smile. png">
	</body>
</html>

Так код будет выглядеть в браузере:

Обратите внимание на то, что тег <img> не требует закрывающего тега.

Блок . Ссылки в виде картинок

Ссылкой может быть не только текст, но и картинка — для этого достаточно тег <img> вложить в тег <a>, как это сделано в следующем примере. Нажмите на картинку — и вы перейдете по ссылке на сайт phphtml.net (чтобы потом вернуться назад на книжку — нажмите кнопку «назад» в браузере):

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Это заголовок тайтл</title>
	</head>
	<body>
		<a href="http://phphtml.net"><img src="smile.png"></a>
	</body>
</html>

Так код будет выглядеть в браузере:

Блок . Разрыв строки

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

Давайте убедимся в этом на следующем примере:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Это заголовок тайтл</title>
	</head>
	<body>
		<p>Это первый абзац.</p>
		<p>Это второй абзац.</p>
	</body>
</html>

Так код будет выглядеть в браузере:

Это первый абзац.

Это второй абзац.

Бывают, однако, ситуации, когда мы хотели бы, чтобы у нас был один абзац, но некоторый текст в нем начинался с новой строки. Зачем такое может понадобится? К примеру, я хочу набрать стихотворение, но не хочу разбивать каждую его строку в отдельный абзац, так как это было бы не очень логично.

Чтобы сделать такое, в том месте, где должен быть разрыв строки, следует написать тег <br>. Учтите, что этот тег особенный и не имеет закрывающего.

Давайте посмотрим на его работу на следующем примере:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Это заголовок тайтл</title>
	</head>
	<body>
		<p>Это первая строка текста, <br> а это вторая. </p>
	</body>
</html>

Так код будет выглядеть в браузере:

Это первая строка текста,
а это вторая.

Блок . Комментарии HTML

Практически во всех языках программирования есть такое понятие как «комментарии». Комментарии — это такой текст, который будет проигнорирован браузером — на экране он будет не виден, но останется в исходном коде страницы.

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

Комментарии в HTML оформляются следующим образом: сначала уголок, знак ! и два дефиса — <!—, потом текст комментария, а потом два дефиса и уголок — —>. Смотрите пример:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Это заголовок тайтл</title>
	</head>
	<body>
		<!-- 
			Это комментарий HTML -
			на странице сайта он не отображается.
		-->
		Это основное содержимое страницы.
	</body>
</html>

Что вам делать дальше:

Приступайте к решению задач по следующей ссылке: задачи к уроку.

Когда все решите — переходите к изучению новой темы.

← Предыдущая страница Следующая страница →

Основные теги HTML | Карьера Карма

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

Поскольку веб-разработка является одной из лучших технических профессий 2022 года, освоение основных HTML-тегов — идеальное место для начала обучения.

Найдите подходящий учебный лагерь

  • Career Karma подберет для вас лучшие технологические учебные курсы
  • Доступ к эксклюзивным стипендиям и подготовительным курсам

Выберите свой интерес
Разработка программного обеспеченияДизайнОбработка и анализ данныхАналитика данныхПродажиUX-дизайнКибербезопасностьЦифровой маркетингИмя

Фамилия

Электронная почта

Номер телефона

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

Что такое теги HTML? На фото: рождение веб-сайта.

Вы читаете эту статью на сайте. Вы когда-нибудь задумывались, откуда компьютер знает, какой контент отображать и как его отображать? Что делает некоторые тексты жирными, курсивными, а некоторые содержат ссылку на другую веб-страницу?

Частью ответа являются теги HTML. Когда-то HTML составлял большую часть кода в Интернете. Хотя это изменилось, HTML по-прежнему является важной частью получения контента в Интернете.

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

Что такое основные теги HTML? Теги HTML — отличное место для начала обучения веб-разработке.

HTML-тег — это специальное ключевое слово, заключенное в острые скобки < и >, например:. Теги почти всегда идут парами, с одним начальным тегом и одним конечным тегом. Разница в том, что закрывающие теги имеют дополнительную косую черту внутри скобок: 

<пример>Первый тег — это начало, а второй — конец.

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

1.

 

Это тег корневого элемента. Это означает, что все, что заключено в эти скобки, содержит HTML-код.

2.  

Этот тег отличает заголовок веб-страницы от содержимого. Здесь вы размещаете код Javascript или предоставляете «мета» информацию о веб-сайте.

3.

 

Вы заметили, что вкладки браузера содержат текст, который дает вам обзор веб-сайта? Этот текст записывается как заголовок сайта с этим тегом.

4.

 

Тег body определяет фактическое содержание веб-сайта.

5.

 

Это тег заголовка, который создает заголовок, увеличивая текст и выделяя его жирным шрифтом. Имеется шесть тегов заголовков: h2, h3, h4, h5, h5, h6, в порядке убывания размера.

6.

 

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

7.

 

Этот тег позволяет нам создать ссылку с атрибутом href, например: 

Нажмите здесь.

8.  

Тег image позволяет вставлять изображения на веб-страницу.

9.

 

Теги Div группируют несколько фрагментов контента в один контейнер, что позволяет выполнять такие действия, как применение отдельных стилей только к этому контенту

10.  

Span — это уменьшенная версия div, используемая для оформления встроенного содержимого или взаимодействия с ним. Вы можете добавить всего пару слов в определенный класс (Text), что, опять же, отлично подходит для стилизации и повышения отзывчивости контента.

Этого должно быть более чем достаточно, чтобы вы начали создавать потрясающие веб-сайты!

О нас: Career Karma — это платформа, предназначенная для того, чтобы помочь соискателям найти, изучить и подключиться к программам профессионального обучения для продвижения по карьерной лестнице. Узнайте о публикации CK.


Теги HTML

Об авторе

Трент Фаулер

Писатель Career Karma

Трент Фаулер — исследователь данных и писатель, интересующийся машинным обучением, технологиями блокчейна и футуризмом. читать дальше

Подробнее читайте Трент Фаулер

Поделись этим

Основные HTML-теги — 1Keydata HTML Tutorial


Учебное пособие по HTML > HTML-теги > Основные HTML-теги

Основные теги включают,,<meta> и <тело>. Мы вводим каждый из четырех в следующем:</p><h4></h4><html></h4><p data-readability-styled="true"> Этот тег используется для указания того, что это HTML-документ. Большинство 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/ppt4web.ru/images/1563/50340/640/img1.jpg' /><noscript><img loading='lazy' src='/800/600/http/ppt4web.ru/images/1563/50340/640/img1.jpg' /></noscript></p><h4></h4><заголовок></h4><p data-readability-styled="true"> Этот тег используется для обозначения раздела заголовка HTML-документа, который обычно включает теги<title> и<meta> и не отображается в главном окне браузера.</p><h4></h4><название></h4><p data-readability-styled="true"> Это указывает на заголовок этой HTML-страницы. Название — это то, что отображается в верхнем левом углу браузера при просмотре веб-страницы. Например, прямо сейчас вы можете увидеть там «Основные теги: html, head, title, meta, body». Это название этой страницы.</p><p> Тег title важен, когда речь идет о ранжировании в поисковых системах. Многие поисковые системы уделяют особое внимание тексту в теге<title>. Это связано с тем, что (логично) слова в теге<title> указывают на содержание страницы.</p><h4></h4><мета></h4><p data-readability-styled="true"> Информация тега<meta> не отображается напрямую при отображении страницы в браузере. Скорее, это используется автором 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/fsd.multiurok.ru/html/2020/11/23/s_5fbbba8fcaa4e/img19.jpg' /><noscript><img loading='lazy' src='/800/600/http/fsd.multiurok.ru/html/2020/11/23/s_5fbbba8fcaa4e/img19.jpg' /></noscript> Два общих атрибута: <b> name </b> и <b> content </b> . Тег<meta> раньше имел большое значение в поисковой оптимизации, и авторы тщательно продумывали, что находится внутри тега, чтобы получить лучший рейтинг в поисковых системах, но в последнее время его важность неуклонно снижается.</p><h4></h4><тело></h4><p data-readability-styled="true"> Тег<body> включает в себя HTML-текст документа. Все, что находится внутри тега<body> (кроме того, что находится внутри тега <script>),отображается в браузере внутри главного окна браузера.</p><p>Тег<body>может содержать несколько атрибутов.Наиболее часто используется они перечислены ниже:</p><ul><li><b>bgcolor</b>:Это цвет фона всего HTML-документа,который может быть задан либо непосредственно именем цвета,либо шестизначным шестнадцатеричным кодом.</li><li><b>alink</b>:Цвет ссылок.</li><li><b>vlink</b>:Цвет посещенных ссылок.</li><li><b>topmargin</b>:Поле от верхней части окна браузера.</li><li><b>leftmargin</b>:Поле слева от окна браузера.<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/luxe-host.ru/wp-content/uploads/0/4/a/04ade7d465243ff3d2286e9e44cc3f57.jpeg'/><noscript><img loading='lazy'src='/800/600/http/luxe-host.ru/wp-content/uploads/0/4/a/04ade7d465243ff3d2286e9e44cc3f57.jpeg'/></noscript></div><!--.entry-content--></div><!--.entry-content-wrapper--></div></article>[an error occurred while processing the directive]<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/css/text-border-css-text-border-using-css-border-around-text.html"rel="prev">Text border css:Text border using css(border around text)</a></div><div class="nav-next"><a href="https://xn--90abhccf7b.xn--p1ai/raznoe/programmirovanie-na-javascript-s-nulya-osnovy-javascript-2.html"rel="next">Программирование на javascript с нуля:Основы JavaScript</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/osnovnye-tegi-v-html-bazovye-tegi-v-html.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='33963'id='comment_post_ID'/><input type='hidden'name='comment_parent'id='comment_parent'value='0'/></p></form></div>[an error occurred while processing the directive]</div>[an error occurred while processing the directive]</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> </body></html>