Как вставить на задний фон картинку в html: Как добавить фоновый рисунок на веб-страницу?

Leave a Comment / Html / By /

Узнаем как без проблем вставить картинку в HTML

Для создания веб-страниц и даже целых сайтов, как известно, используется специальный язык разметки HTML (Hypertext Markup Language), но без фотографий и различных изображений каждый сайт представлял бы собой просто структурированный и скучный текст. Именно поэтому для добавления изображений на сайт используется специальный код, который предельно прост в использовании и позволяет как вставить картинку в HTML в конкретное место на странице, так и использовать ее в качестве фона.

С чего начать?

Для того чтобы написать код, нужно определиться, в какой программе это сделать. Сейчас их существует огромное количество, одной из самых известных является NotePad++. Она обладает рядом функций, очень полезных при написании кода, позволяет выявлять ошибки и не запутаться в тегах. Однако если у вас нет возможности прибегнуть к помощи специализированных программ, можете воспользоваться простым блокнотом, код от этого не изменится.

Какой тег нам понадобится

Определившись с программой для написания кода, нужно понять, что в ней писать, как вставить картинку в HTML в блокноте или любой другой программе. Начать следует с тега <img / >. Именно этот тег объявляет картинку в HTML-документе, он одиночный и не требует закрытия.

А что дальше?

Мы объявили в коде, что собираемся использовать изображение, но мы его еще не указали. Так как вставить картинку в HTML? Для этого нам понадобится атрибут src, который используется с нашим тегом. Этот атрибут задает местонахождение нашей картинки вне зависимости от того, находится ли она на каком-то сайте либо на нашем компьютере.

  • Если изображение будет располагаться на стороннем сайте, то наш код будет выглядеть следующим образом:
<img src="//coder-booster.ru/images/main-logo.png" />
  • В случае же нахождения картинки в той же папке, что и наш HTML-файл, код будет выглядеть так:
<img src="название картинки. jpg" />

Альтернативный текст

У тега <img /> есть еще один атрибут — alt. Используют его для того, чтобы в браузере было видно описание картинки, если по какой-либо причине само изображение не может быть загружено. Его наличие желательно также для того, чтобы слабовидящие люди могли знать, что за изображение присутствует на сайте, ведь текст, находящийся в значении этого атрибута, озвучивается программами чтения с экрана. Итоговый код с атрибутами src и alt будет выглядеть так:

<img src="название картинки.jpg" alt="описание картинки" />

Всплывающие подсказки

Помимо прочего, у тега <img /> есть еще один атрибут title. Благодаря этому атрибуту при наведении курсора мыши на изображение альтернативный текст будет отображен во всплывающей подсказке. Однако эта функция поддерживается только браузером Internet Explorer, чтобы такие подсказки всплывали в других браузерах, потребуются специальные плагины. Всплывающие подсказки используются вместе с атрибутом alt, они не обязательны, но при их использовании код будет выглядеть следующим образом:

<img src="название картинки. jpg"   alt="описание картинки" title="всплывающее описание"  />

Размер изображения

С тем, как вставить картинку в текст с HTML, мы разобрались. Но что если мы хотим сделать изображение чуть больше или меньше? Для этого в HTML предусмотрены специальные атрибуты: width (ширина) и height (высота). Значения данных атрибутов могут быть как в процентах, так и в пикселях. Если задать ширину в пикселях, а высоту в процентах, то код примет следующий вид:

<img src="название картинки.jpg" />

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

Картинка в качестве фона

А что если мы хотим использовать изображение не в тексте, а вставить картинку на фон в HTML, как это сделать? Для этого нам понадобится тег <body>, без которого не обходится ни один HTML-документ. Именно в него заключено все видимое содержимое документа, а его атрибуты могут задавать размер, цвет шрифта и в том числе задний фон. Вставить картинку в HTML как изображение фона очень просто, для этого нам нужно будет использовать атрибут background. Выглядеть этот код будет следующим образом:

<body background="изображение для фона.jpg">  ...  </body>

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

Обтекание изображения текстом

Иногда необходимо, чтобы картинка была рядом с текстом, который огибал бы ее тем или иным способом. Но если вставить картинку просто внутрь строки, то графически это будет выглядеть некрасиво, текст будет разбит неаккуратно. Так как вставить картинку в HTML, чтобы изображение органически вписывалось в дизайн страницы? Для этого нам необходим атрибут align тега <img />. Этот атрибут может принимать два значения: left и right.

При использовании значения left изображение будет размещено слева от текста, а при использовании атрибута right, соответственно, справа. Выглядеть этот код будет так:

<img src="название картинки.jpg" align="left" />    или    <img src="название картинки.jpg" align="right" />

Если же нам будет необходимо, чтобы текст был расположен между двумя изображениями, код будет выглядеть следующим образом:

<img src="первая картинка.jpg" align="left" />    <img src="вторая картинка.jpg" align="right" />

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

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

Как изменить цвет фона и текста в HTML? Как сделать фон картинку? Урок – 8

Главная » Все про HTML » Как изменить цвет фона и текста в HTML? Как сделать фон картинку? Урок – 8

О том, как менять цвет текста я писал тут. Хочу сказать, что это не всегда удобно. Вот, например, вы хотите поменять цвет текста всей HTML страницы. Например, черный цвет текста изменить на красный. Для этого существует атрибут text для тэга <body>. Хочу зацепить тег <body>, так как в этом теге есть атрибуты, которые помогут изменить не только цвет текста, но и фон всей HTML  страницы. А теперь подробней и с примером.
Вот атрибуты, которые мы сейчас рассмотрим:

TEXT – этот атрибут задает цвет текста всего документа.
BGCOLOR – этот атрибут указывает цвет фона HTML странице.
BACKGROUND – с этим атрибутом можно залить фон страницы изображением.

Изменяем цвет текста с помощью атрибута text.

Атрибут text прописывается в теге <body>. Цвет задается в виде цифрового кода:

<body text=»#cc0000″>

или обычным названием цвета:

<body text=»green»>

Код кодировки и название цвета для HTML вы посмотрите тут.

Вот пример:


<html>
<head>
<title>Изменяем цвет текста с помощью атрибута text</title>
<meta http-equiv="content-type" content="text/html; charset=Windows-1251">
</head>
<body text="#cc0000">
Текст страницы, таблицы, картинки, музыка и видео. 
</body>
</html>

Результат:

Или вот так:


<html>
<head>
<title>Изменяем цвет текста с помощью атрибута text</title>
<meta http-equiv="content-type" content="text/html; charset=Windows-1251">
</head>
<body text="green">
Текст страницы, таблицы, картинки, музыка и видео.
</body>
</html>

Результат:

Изменяем цвет фона с помощью атрибута BGCOLOR.

При помощи атрибута BGCOLOR, который тоже размещается в теге <body>, можно задать цвет фона HTML страницы.

Цвет задается в виде цифрового кода:

<body bgcolor=»#000000″>

или обычным названием цвета:

<body bgcolor=»green»>

Вот пример:


<html>
<head>
<title>Изменяем цвет фона с помощью атрибута BGCOLOR</title>
<meta http-equiv="content-type" content="text/html; charset=Windows-1251">
</head>
<body bgcolor="#000000" text="green">
Текст страницы, таблицы, картинки, музыка и видео.
  
</body>
</html>

Результат:

Или вот так:


<html>
<head>
<title>Заголовок страницы</title>
<meta http-equiv="content-type" content="text/html; charset=Windows-1251">
</head>
<body bgcolor="green" text="#000000">
Текст страницы, таблицы, картинки, музыка и видео.
</body>
</html>

Результат:

Изменяем цвет фона с помощью атрибута BACKGROUND.

Атрибут  BACKGROUND тоже размещается в теге <body>. С помощью этого атрибута вы сможете сделать картиночный фон. Формат картинки берите jpg или gif. Разрешение картинки можно брать от 12х12 пикселей и больше.

Если фоновая картинка размещена вместе с HTML файлом, это будет выглядеть так:

<bоdy baсkground=»fon.gif»>

Если фоновая картинка размещена в папке images, это будет выглядеть так:

<bоdy baсkground=»images/fon.gif»>

Вот пример:


<html>
<head>
<title>Заголовок страницы</title>
<meta http-equiv="content-type" content="text/html; charset=Windows-1251">
</head>
<body background="fon. gif" text="black">
Текст страницы, таблицы, картинки, музыка и видео.
</body>
</html>

Результат:

Или вот так:


<html>
<head>
<title>Заголовок страницы</title>
<meta http-equiv="content-type" content="text/html; charset=Windows-1251">
</head>
<body background="images/fon.gif" text="#000000">
Текст страницы, таблицы, картинки, музыка и видео.
</body>
</html>

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

Спасибо, что посетили блог BlogGood.ru. Удачи!!!

Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓

Добавить комментарий

Метки: html, основы

Как вставить фоновое изображение в HTML с помощью блокнота

Последнее обновление: 16 июня 2022 г.

IN — HTML

В этом уроке мы покажем вам, как вставить фоновое изображение в html с помощью блокнота при вставке изображение в качестве фона, на котором мы должны сконцентрироваться, покрывать весь вид страницы, и оно должно быть статичным, без повторов.

Итак, здесь показано, как реализовать концепцию вставки фонового изображения.

Пошаговое руководство о том, как вставить фоновое изображение в HTML с помощью Блокнота: —

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

В теге нет закрывающего тега и есть два атрибута, а именно src и alt.

Атрибут Src используется для сбора пути к изображению. Атрибут Alt представляет собой краткое описание изображения. Каким-то образом, если это изображение не загружено во время выполнения, это описание тега alt будет показано пользователю.

 

<голова>
<название>
Отображение фонового изображения с помощью Блокнота


<тело>
 jpg" alt="фоновое изображение">
  1. Тег , который указывает веб-браузеру, в какой версии HTML-файла записан файл, и не имеет завершающего тега.
  2. Тег используется для обозначения начала HTML-документа.
  3. Как показано выше, тег содержит информацию о веб-странице и некоторых веб-сайтах, когда необходимо использовать внешние файлы, эти ссылки объявляются здесь. Тег используется для установки заголовка веб-страницы.</li><li> Оба тега<head> и<title> имеют пару закрывающих тегов, поэтому нам нужно соответственно закрыть закрывающие теги. Если вы не закрыли ни одного конечного тега должным образом, это также повлияет на результат веб-страницы.</li><li> Тег<body> является началом основной части кодирования, поскольку он содержит кодирование целых блоков сайта и элементов, описанных здесь.</li><li> Мы уже обсуждали тег <img>, используемый для отображения изображения на веб-сайте. В теге <img> есть два атрибута src и alt, атрибут src содержит информацию о PATH изображения.<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/i.ytimg.com/vi/vPP_IiR-ots/sddefault.jpg' /><noscript><img loading='lazy' src='/800/600/http/i.ytimg.com/vi/vPP_IiR-ots/sddefault.jpg' /></noscript><div id="yandex_rtb_3" class="yandex-adaptive classYandexRTB"></div> <script type="text/javascript">if(rtbW>=960){var rtbBlockID="R-A-744004-3";} else{var rtbBlockID="R-A-744004-5";} window.yaContextCb.push(()=>{Ya.Context.AdvManager.render({renderTo:"yandex_rtb_3",blockId:rtbBlockID,pageNumber:3,onError:(data)=>{var g=document.createElement("ins");g.className="adsbygoogle";g.style.display="inline";if(rtbW>=960){g.style.width="580px";g.style.height="400px";g.setAttribute("data-ad-slot","9935184599");}else{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",stroke2);document.getElementById("yandex_rtb_3").appendChild(g);(adsbygoogle=window.adsbygoogle||[]).push({});}})});window.addEventListener("load",()=>{var ins=document.getElementById("yandex_rtb_3");if(ins.clientHeight =="0"){ins.innerHTML=stroke3;}},true);</script> alt в смысле альтернативного имени изображения.</li><li> При указании пути к атрибуту src это должно быть правильное местоположение, поскольку это приводит к невозможности загрузки изображения на веб-сайте. Затем имя атрибута alt должно описывать изображение, которое используется, чтобы пользователь мог получить представление о нем.</li><li> В теге <img> мы также можем установить ширину и высоту без использования стиля, результат будет таким же на сайте.</li><li> (т.е.) <img class="lazy lazy-hidden" decoding="async" src="//xn--90abhccf7b.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src="background.jpg" alt="фоновое изображение"><noscript><img decoding="async" src="background.jpg" alt="фоновое изображение"></noscript></li><li> При установке одного изображения в качестве фона нам нужно закрыть его до краев, поэтому здесь мы устанавливаем высоту и ширину на 100%. Таким образом, он покрывает 100% просмотров на сайте.</li><li> Оба тега <script defer src="https://xn--90abhccf7b.xn--p1ai/wp-content/cache/autoptimize/js/autoptimize_eacc7423ae55f04fc134551454013fc2.js"></script></body>,</html> закрыты соответственно. Тег</body> указывает на конец тела, затем тег</html> указывает на конец HTML-документа.</li></ol><h3><span class="ez-toc-section" id="i-11"> Заключение: — </span></h3><p> Я надеюсь, что это руководство о том, как вставить фоновое изображение в 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/luxe-host.ru/wp-content/uploads/b/6/6/b660a45b1933f2a1ad60eed48e67630a.jpeg' /><noscript><img loading='lazy' src='/800/600/http/luxe-host.ru/wp-content/uploads/b/6/6/b660a45b1933f2a1ad60eed48e67630a.jpeg' /></noscript><center><div class="advv"><ins class="adsbygoogle" style="display:inline-block;width:336px;height:280px" data-ad-client="ca-pub-1812626643144578" data-ad-slot="9935184599"></ins> <script>(adsbygoogle=window.adsbygoogle||[]).push({});</script></div></center><center><div class="advv"><ins class="adsbygoogle" style="display:inline-block;width:336px;height:280px" data-ad-client="ca-pub-1812626643144578" data-ad-slot="9935184599"></ins> <script>(adsbygoogle=window.adsbygoogle||[]).push({});</script></div></center></p><p> В заключение мы можем вставить фоновое изображение в html с помощью блокнота. Это всего лишь однострочный код, который неожиданно решит вашу проблему, теперь мы можем понять разницу с обычным отображением изображений на веб-странице.</p><p> Это важная тема еще и потому, что большая часть веб-сайтов, на которых мы видим главную страницу, определенно имеет фоновые изображения в качестве баннеров. Я надеюсь, что этот урок поможет вам.</p><h2><span class="ez-toc-section" id="_HTML-4"> Теги HTML/таблицы/фоновое изображение — индекс тега </span></h2><table><tr><th scope="row"> Браузер</th><td><ul><li></li><li></li><li></li><li></li><li></li></ul></td></tr><tr><th scope="row"> Тип</th><td><ul><li> Удлинитель</li></ul></td></tr></table><p> Атрибут фона элементов TABLE, TR и TD (TH) определяет фоновое изображение таблицы.</p><div id="yandex_rtb_2" class="yandex-adaptive classYandexRTB"></div> <script type="text/javascript">if(rtbW>=960){var rtbBlockID="R-A-744004-3";} else{var rtbBlockID="R-A-744004-5";} window.yaContextCb.push(()=>{Ya.Context.AdvManager.render({renderTo:"yandex_rtb_2",blockId:rtbBlockID,pageNumber:2,onError:(data)=>{var g=document.createElement("ins");g.className="adsbygoogle";g.style.display="inline";if(rtbW>=960){g.style.width="580px";g.style.height="400px";g.setAttribute("data-ad-slot","9935184599");}else{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",stroke2);document.getElementById("yandex_rtb_2").appendChild(g);(adsbygoogle=window.adsbygoogle||[]).push({});}})});window.addEventListener("load",()=>{var ins=document.getElementById("yandex_rtb_2");if(ins.clientHeight =="0"){ins.innerHTML=stroke3;}},true);</script> <pre> <mark> <table background="back.gif"></table> </mark> : применяется ко всей таблице <mark> <tr background="back.gif"></tr> </mark> : применяется ко всем ячейкам подряд <mark> <td background="back.<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/z/z4oFZqI1sweOSTmtuBYMyDkK87RdrLUa59PQpx/slide-8.jpg' /><noscript><img loading='lazy' src='/800/600/http/cf.ppt-online.org/files/slide/z/z4oFZqI1sweOSTmtuBYMyDkK87RdrLUa59PQpx/slide-8.jpg' /></noscript> gif"></td> </mark> : применяется к одной ячейке </pre><p/><table><tr><th> Атрибут</th><th> Значение</th><th> Пояснение</th></tr><tr><td> фон = » »</td><td> URL-адрес</td><td> URL изображения для отображения</td></tr></table><p> Атрибут расширения. (Нестандартный атрибут)</p><p> Используйте CSS вместо этого атрибута. Подробную информацию о CSS см. в «Связанном документе».</p><h4><span class="ez-toc-section" id="i-12"> Пример </span></h4><p> Фоновое изображение</p> Фоновое изображение стола<pre> <mark> <table border="1" background="image/back.gif"> </mark> <tr> <td>Строка1 – Столбец1</td> <td>Строка1 – Столбец2</td> <td><center><ins class="adsbygoogle" style="display:block; text-align:center;" data-ad-layout="in-article" data-ad-format="fluid" data-ad-client="ca-pub-1812626643144578" data-ad-slot="4491286225"></ins> <script>(adsbygoogle=window.adsbygoogle||[]).push({});</script></center>Строка1 – Столбец3</td> </tr> <tr> <td>Строка2 – Столбец1</td> <td>Строка2 – Столбец2</td> <td>Строка2 – Столбец3</td> </tr> <tr> <td>Строка3 – Столбец1</td> <td>Строка3 – Столбец2</td> <td>Строка3 – Столбец3</td> </tr> <mark> </таблица> </mark> </pre><dl><dt> Выход</dt><dd><table border="1" background="image/back.gif"><tr><td> Ряд1 — Кол1</td><td> Ряд1 — Столбец2</td><td> Ряд 1 – столбец 3</td></tr><tr><td> Ряд2 — Колонка 1</td><td> Ряд2 — Колонка 2</td><td> Ряд 2 – столбец 3</td></tr><tr><td> Ряд3 — Кол1</td><td> Ряд3 — Колонка2</td><td> Ряд3 — Колонка3</td></tr></table></dd></dl> Фоновое изображение строки<pre> <граница таблицы="1"> <tr> <td>Строка1 – Столбец1</td> <td>Строка1 – Столбец2</td> <td>Строка1 – Столбец3</td> </tr> <mark> <tr background="image/back.<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/c/6/b/c6b3402cc8a5d9d65678d56cbc34a675.jpeg' /><noscript><img loading='lazy' src='/800/600/http/luxe-host.ru/wp-content/uploads/c/6/b/c6b3402cc8a5d9d65678d56cbc34a675.jpeg' /></noscript> gif"> </mark> <td>Строка2 – Столбец1</td> <td>Строка2 – Столбец2</td><div id="yandex_rtb_1" class="yandex-adaptive classYandexRTB"></div> <script type="text/javascript">if(rtbW>=960){var rtbBlockID="R-A-744004-3";} else{var rtbBlockID="R-A-744004-5";} window.yaContextCb.push(()=>{Ya.Context.AdvManager.render({renderTo:"yandex_rtb_1",blockId:rtbBlockID,pageNumber:1,onError:(data)=>{var g=document.createElement("ins");g.className="adsbygoogle";g.style.display="inline";if(rtbW>=960){g.style.width="580px";g.style.height="400px";g.setAttribute("data-ad-slot","9935184599");}else{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",stroke2);document.getElementById("yandex_rtb_1").appendChild(g);(adsbygoogle=window.adsbygoogle||[]).push({});}})});window.addEventListener("load",()=>{var ins=document.getElementById("yandex_rtb_1");if(ins.clientHeight =="0"){ins.innerHTML=stroke3;}},true);</script> <td>Строка2 – Столбец3</td> <mark> </tr> </mark> <tr> <td>Строка3 – Столбец1</td> <td>Строка3 – Столбец2</td> <td>Строка3 – Столбец3</td> </tr> </таблица> </pre><dl><dt> Выход</dt><dd><table border="1"><tr><td> Ряд1 — Колонка 1</td><td> Ряд1 — Столбец2</td><td> Ряд 1 – столбец 3</td></tr><tr background="image/back.gif"><td> Ряд2 — Колонка 1</td><td> Ряд2 — Кол2</td><td> Ряд 2 – столбец 3</td></tr><tr><td> Ряд3 — Кол1</td><td> Ряд3 — Колонка2</td><td> Ряд3 — Колонка3</td></tr></table></dd></dl> Фоновое изображение ячеек <pre> <граница таблицы="1"><tr><td>Строка1 – Столбец1</td> <mark><td background="image/back.gif"> </mark> Строка1 - Столбец2 <mark></td> </mark><td>Строка1 – Столбец3</td></tr><tr><td>Строка2 – Столбец1</td> <mark><td background="image/back.gif"> </mark> Строка2 — Столбец2 <mark></td> </mark><td>Строка2 – Столбец3</td></tr><tr><td>Строка3 – Столбец1</td> <mark><td background="image/back.<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/i2.wp.com/smarticle.ru/wp-content/uploads/2013/08/fon6.png' /><noscript><img loading='lazy' src='/800/600/http/i2.wp.com/smarticle.ru/wp-content/uploads/2013/08/fon6.png' /></noscript><center><ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-1812626643144578" data-ad-slot="3076124593" data-ad-format="auto" data-full-width-responsive="true"></ins> <script>(adsbygoogle=window.adsbygoogle||[]).push({});</script></center></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/html/html-readonly-input-atribut-readonly-htmlbook-ru.html" rel="prev">Html readonly input: Атрибут readonly | htmlbook.ru</a></div><div class="nav-next"><a href="https://xn--90abhccf7b.xn--p1ai/raznoe/grid-column-grid-column-css-cascading-style-sheets.html" rel="next">Grid column: grid-column — CSS: Cascading Style Sheets</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/kak-vstavit-na-zadnij-fon-kartinku-v-html-kak-dobavit-fonovyj-risunok-na-veb-straniczu.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='29997' 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> </body></html>