Розрив рядка в HTML: використовуємо тег br

Під час форматування тексту часто виникає потреба додати новий абзац, але без порожнього рядка, яку вставляє тег абзацу

. Крім того, іноді потрібно в точності зберегти форматування попереднього тексту, яке тег

"Категорично" скасовує. Нерідко доводиться розбивати один абзац на декілька частин, пов`язаних між собою логічно.

Для деяких фрагментів тексту прийняті для абзаців стандартні інтервали просто недоречні. Це можуть бути написи під картинками і в таблицях, вірші, цитати, виноски та примітки.

html тег br

Для примусового переносу рядків передбачений спеціальний тег, функція якого закладена в його назві br (break row - "розірвати ряд, рядок"). Тег
мови гіпертекстової розмітки html означає, що всі наступне за ним вміст повинен починатися з нового рядка. Якщо потрібно, можна проставити кілька тегів підряд, щоб добитися необхідного інтервалу.

Тег
не чутливий до регістру і не вимагає закриває тега, тому що це порожній елемент, але краще звикати закривати всі теги. В XHTML тег розриву повинен бути "наглухо закритий" на зворотний слеш.

Приклад використання тега розриву

Тег br в дії < /title></p><br clear="all"/><div id="TKicDHpGzmFfIV7oeiWH" data-type="0" class="blockOfO1b2l3" ></div><br clear="all"/><p></head></p><p><body></p><p><р> Прогул на службі </р></p><p><p> Ще ніде і ніколи <br></p><p>Я не був настільки поганим <br></p><p>Начальства зажерлива орда <br></p><br clear="all"/><div id="M807623ScriptRootC1314700"></div><script charset="utf-8" src="https://jsc.mgid.com/u/a/u.animalefans.com.1314700.js" async></script><br clear="all"/><p>Гризе мене живим </р></p><p></html></p><p>Прогул на службі</p><p>Ще ніде і ніколи<br />Я не був настільки поганим.<br />Начальства зажерлива орда<br />Гризе мене живим.</p><h2>Атрибут тега <br></h2><p>Єдиний атрибут, яким володіє html тег <br>, називається Clear ("очистити"). Він вказує браузеру, як вчинити з переносимої рядком, якщо тексту доведеться обтікати так званий плаваючий елемент, яким може бути, наприклад, зображення з атрибутом вирівнювання align, що використовують значення right / left, або блок в CSS, якому прописано властивість float.</p><p>У специфікаціях по XHTML 1.0 / HTML 4.01 атрибут clear можна використовувати тільки з Transitional, Frameset і <!DOCTYPE>, інакше код буде неробочим.</p><h2>Властивості атрибуту тега <strong></strong></h2><p>Ефект від застосування атрибута clear залежить від його значення і розташування обтічного текстом плаваючого елементу. Атрибут може приймати 4 значення:</p><p><br clear = `right | left | all | none`></p><p><img itemprop="image" alt="тег br" class="if" height="406" src="https://img.ukrguru.ru/fukr/4/razryv-stroki-v-html-ispolzuem-teg-br_1_1.jpg" width="450" /></p><p>Значення left забороняє обтікання елементу, вирівняного по лівому краю, тому текст, "спіткнувшись" про тег <br>, розташується нижче зображення або іншого плаваючого елементу.</p><p>Точно такий результат вийде від використання аргументу all, який ні за що не дозволить <a href="https://ukrguru.ru/komp-juteri/71871-pochatkivcjam-veb-dizajneram-jak-zrobiti.html">тексту обтікати картинку</a> ні праворуч, ні ліворуч.</p><p>Значення right забороняє тексту обтікання елементу, вирівняного по правому краю, тому після тега <br> тексту не залишиться нічого іншого, як обійти зображення, обтікаючи його справа.</p><p>Значення none ("ні вашим, ні нашим") взагалі знімає всі повноваження з атрибуту clear, і тег <br> мовчки переносить рядок вниз.</p><p>Значення за замовчуванням, як таке, у атрибуту clear тега відсутня.</p><h2>Тег <br> - це м`який перенос</h2><p>Тег розриву рядка дуже зручний для створення необхідних інтервалів між абзацами, усередині яких він використовується як м`який перенос, але не як засіб для поділу тексту на абзаци.</p><p><img itemprop="image" alt="тег br мови гіпертекстової розмітки html означає" class="if" height="268" src="https://img.ukrguru.ru/fukr/4/razryv-stroki-v-html-ispolzuem-teg-br_2_1.jpg" width="600" /></p><p>Не слід занадто захоплюватися тегом перекладу рядків для форматування тексту, тому що результати його застосування не завжди відрізняються витонченістю.</p><p>Наприклад, якщо використовувати тег <br> для перекладу рядків усередині абзацу, це може призвести до появи "гребінки" у вікні користувача, якщо воно менше вікна, на яке орієнтувався веб-майстер.</p> <div class="shareit"> <span class="share-item twitterbtn"></span> </div><br clear="all"/><div class="addthis_native_toolbox"></div><script async type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-4f7d7dc43c41fbaa"></script><br clear="all"/><div id="CG2Jl0ymZ76G3rt5hNMb" data-type="0" class="blockOfO1b2l3" ></div> </div></div><div class="related-posts"> <div class="postauthor-top"> <div class="h4">Схожі повідомлення</div> </div> <ul> <li class="last"> <a class="relatedthumb" href="https://ukrguru.ru/osvita/30997-abzacnij-vidstupi-jak-oformiti-abzacnij-vidstup-v.html" title="Абзацний відступи. Як оформити абзацний відступ в "Ворді""> <span class="rthumb"> <img src="/uploads/blockpro/65x50/2015-04/65x50_crop_abzacnye-otstupy-kak-oformit-abzacnyj-otstup-v_1.jpg" class="attachment-widgetthumb wp-post-image" alt="Абзацний відступи. Як оформити абзацний відступ в "Ворді"" title="Абзацний відступи. Як оформити абзацний відступ в "Ворді"" height="50" width="65"> </span> <span> Абзацний відступи. Як оформити абзацний відступ в "Ворді" </span> </a> <div class="related-post-info"><span class="theauthor"><a href="https://ukrguru.ru/osvita/">Освіта</a></span></div></li><li class="last"> <a class="relatedthumb" href="https://ukrguru.ru/komp-juteri/69015-jak-staviti-probil-html.html" title="Як ставити пробіл html"> <span class="rthumb"> <img src="/uploads/blockpro/65x50/2015-04/65x50_crop_kak-stavit-probel-html_1.jpg" class="attachment-widgetthumb wp-post-image" alt="Як ставити пробіл html" title="Як ставити пробіл html" height="50" width="65"> </span> <span> Як ставити пробіл html </span> </a> <div class="related-post-info"><span class="theauthor"><a href="https://ukrguru.ru/komp-juteri/">Комп'ютери</a></span></div></li><li class="last"> <a class="relatedthumb" href="https://ukrguru.ru/komp-juteri/69026-shho-take-bizhuchij-rjadok-html.html" title="Що таке біжучий рядок HTML"> <span class="rthumb"> <img src="/uploads/blockpro/65x50/2015-04/65x50_crop_chto-takoe-begushhaja-stroka-html_1.jpg" class="attachment-widgetthumb wp-post-image" alt="Що таке біжучий рядок HTML" title="Що таке біжучий рядок HTML" height="50" width="65"> </span> <span> Що таке біжучий рядок HTML </span> </a> <div class="related-post-info"><span class="theauthor"><a href="https://ukrguru.ru/komp-juteri/">Комп'ютери</a></span></div></li><li class="last"> <a class="relatedthumb" href="https://ukrguru.ru/komp-juteri/69027-novij-rjadok-html-4-sposobi.html" title="Новий рядок html - 4 способи"> <span class="rthumb"> <img src="/uploads/blockpro/65x50/2015-04/65x50_crop_krasnaja-stroka-html-4-sposoba_1.jpg" class="attachment-widgetthumb wp-post-image" alt="Новий рядок html - 4 способи" title="Новий рядок html - 4 способи" height="50" width="65"> </span> <span> Новий рядок html - 4 способи </span> </a> <div class="related-post-info"><span class="theauthor"><a href="https://ukrguru.ru/komp-juteri/">Комп'ютери</a></span></div></li><li class="last"> <a class="relatedthumb" href="https://ukrguru.ru/komp-juteri/69049-jak-zrobiti-fon-v-html-korotka-instrukcija.html" title="Як зробити фон в HTML. Коротка інструкція"> <span class="rthumb"> <img src="/uploads/blockpro/65x50/2015-04/65x50_crop_kak-sdelat-fon-v-html-kratkaja-instrukcija_1.jpg" class="attachment-widgetthumb wp-post-image" alt="Як зробити фон в HTML. Коротка інструкція" title="Як зробити фон в HTML. Коротка інструкція" height="50" width="65"> </span> <span> Як зробити фон в HTML. Коротка інструкція </span> </a> <div class="related-post-info"><span class="theauthor"><a href="https://ukrguru.ru/komp-juteri/">Комп'ютери</a></span></div></li><li class="last"> <a class="relatedthumb" href="https://ukrguru.ru/komp-juteri/70933-jak-vstaviti-kartinku-v-html-dokladna-instrukcija.html" title="Як вставити картинку в html? Докладна інструкція"> <span class="rthumb"> <img src="/tema/ukrguru/blockpro/noimage.png" class="attachment-widgetthumb wp-post-image" alt="Як вставити картинку в html? Докладна інструкція" title="Як вставити картинку в html? Докладна інструкція" height="50" width="65"> </span> <span> Як вставити картинку в html? Докладна інструкція </span> </a> <div class="related-post-info"><span class="theauthor"><a href="https://ukrguru.ru/komp-juteri/">Комп'ютери</a></span></div></li> </ul></div><div class="postauthor"><div id="M807623ScriptRootC1314869"></div><script charset="utf-8" src="https://jsc.mgid.com/u/a/u.animalefans.com.1314869.js" async></script><script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script><ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-9698111656288569" data-ad-slot="8956270882" data-ad-format="rectangle"></ins><script>(adsbygoogle = window.adsbygoogle || []).push({});</script> <div class="h4">Схожі повідомлення</div> <div class="postauthor"> <a href="https://ukrguru.ru/komp-juteri/71357-shho-take-tegi-vikoristannja-ih-v-seo.html" title="Що таке теги? Використання їх в SEO"> <img alt="Що таке теги? Використання їх в SEO" src="/tema/ukrguru/blockpro/noimage.png" class="avatar avatar-100 photo" height="100" width="100"> Що таке теги? Використання їх в SEO</a> <p>HTML-теги - це типовий мова розмітки, який призначений для документів глобальної мережі Інтернет. Завдяки йому створені всі сторінки «всесвітньої павутини». Якщо подивитися код сторінки, на якій ви зараз перебуваєте, то вашій увазі постане величезна…</p></div><div class="postauthor"> <a href="https://ukrguru.ru/komp-juteri/71871-pochatkivcjam-veb-dizajneram-jak-zrobiti.html" title="Початківцям веб-дизайнерам: як зробити обтікання картинки текстом"> <img alt="Початківцям веб-дизайнерам: як зробити обтікання картинки текстом" src="https://ukrguru.ru/uploads/blockpro/100x100/2015-04/100x100_crop_nachinajushhim-veb-dizajneram-kak-sdelat-obtekanie_1.jpg" class="avatar avatar-100 photo" height="100" width="100"> Початківцям веб-дизайнерам: як зробити обтікання картинки текстом</a> <p>У цій статті ми розповімо вам про ті особливості HTML і CSS, які пов'язані із зображеннями. Ви дізнаєтеся, як вставити їх в HTML-документ. Також в статті наведена інформація про те, як змінити параметри малюнка і організувати обтікання картинки…</p></div><div class="postauthor"> <a href="https://ukrguru.ru/komp-juteri/71893-prikrasa-veb-storinki-i-rozmir-shriftu-v-html.html" title="Прикраса веб-сторінки і розмір шрифту в HTML"> <img alt="Прикраса веб-сторінки і розмір шрифту в HTML" src="https://ukrguru.ru/uploads/blockpro/100x100/2015-04/100x100_crop_ukrashenie-veb-stranicy-i-razmer-shrifta-v-html_1.jpg" class="avatar avatar-100 photo" height="100" width="100"> Прикраса веб-сторінки і розмір шрифту в HTML</a> <p>Початківцям веб-дизайнерам корисно буде знати про способи оформлення тексту веб-сторінки. До них відносяться вирівнювання, колір, розмір шрифту та багато іншого.З форматуванням пов'язані кілька тегів. Найчастіше використовується "p" - абзац. У нього…</p></div><div class="postauthor"> <a href="https://ukrguru.ru/komp-juteri/72414-formatuvannja-tekstu-u-formati-html.html" title="Форматування тексту у форматі html"> <img alt="Форматування тексту у форматі html" src="https://ukrguru.ru/uploads/blockpro/100x100/2015-04/100x100_crop_formatirovanie-teksta-v-formate-html_1.jpg" class="avatar avatar-100 photo" height="100" width="100"> Форматування тексту у форматі html</a> <p>При оформленні html-документа не слід забувати про такий важливий понятті, як форматування тексту. Завдяки йому текст буде виглядати акуратно і ефектно. Звичайно, завжди можна залишити форматування за замовчуванням. Але в такому випадку може вийти,…</p></div><div class="postauthor"> <a href="https://ukrguru.ru/komp-juteri/73217-forma-html-opis-i-zastosuvannja.html" title="Форма html - опис і застосування"> <img alt="Форма html - опис і застосування" src="https://ukrguru.ru/uploads/blockpro/100x100/2015-04/100x100_crop_forma-html-opisanie-i-primenenie_1.jpg" class="avatar avatar-100 photo" height="100" width="100"> Форма html - опис і застосування</a> <p>Форма html - це спеціальний засіб, який дозволяє проводити контакт між відвідувачами і авторами. У вихідному коді сторінки даний тег записується наступний спосіб: . У даній статті ми розглянемо зміст форми, застосування і способи відправки…</p></div><div class="postauthor"> <a href="https://ukrguru.ru/komp-juteri/73829-jak-zrobiti-vipadajuchij-spisok-v-html.html" title="Як зробити випадаючий список в HTML"> <img alt="Як зробити випадаючий список в HTML" src="https://ukrguru.ru/uploads/blockpro/100x100/2015-04/100x100_crop_kak-sdelat-vypadajushhij-spisok-v-html_1.jpg" class="avatar avatar-100 photo" height="100" width="100"> Як зробити випадаючий список в HTML</a> <p>Найпростіший випадає список в HTML легко створити, використовуючи тег select. Це тег-контейнер, в нього вкладаються теги option - саме вони задають елементи списку.Є кілька варіантів списків, які можна зробити за допомогою тега select: список, що…</p></div><div class="postauthor"> <a href="https://ukrguru.ru/komp-juteri/74340-jak-zrobiti-tablicju-v-html-dokladnij-opis.html" title="Як зробити таблицю в HTML: докладний опис"> <img alt="Як зробити таблицю в HTML: докладний опис" src="https://ukrguru.ru/uploads/blockpro/100x100/2015-04/100x100_crop_kak-sdelat-tablicu-v-html-podrobnoe-opisanie_1.jpg" class="avatar avatar-100 photo" height="100" width="100"> Як зробити таблицю в HTML: докладний опис</a> <p>Таблиці - одні з найбільш важливих, але в теж час складних елементів, які повинні бути присутніми на веб-сторінках. З їх допомогою зручно подавати важливу і корисну інформацію в досить стислій формі. Звичайно, більшість редакторів в шаблонах, що…</p></div><div class="postauthor"> <a href="https://ukrguru.ru/komp-juteri/74581-jak-zrobiti-v-html-tablicju-tablicja-koloriv.html" title="Як зробити в HTML таблицю. Таблиця кольорів"> <img alt="Як зробити в HTML таблицю. Таблиця кольорів" src="https://ukrguru.ru/uploads/blockpro/100x100/2015-04/100x100_crop_kak-sdelat-v-html-tablicu-tablica-cvetov_1.jpg" class="avatar avatar-100 photo" height="100" width="100"> Як зробити в HTML таблицю. Таблиця кольорів</a> <p>Початківцям вебмайстрам доводиться стикатися з безліччю проблем. Здавалося б, сьогодні вже можна використовувати для створення своїх сайтів шаблони, але от біда, далеко не завжди вони володіють потрібними властивостями, і тоді доводиться або…</p></div><div class="postauthor"> <a href="https://ukrguru.ru/komp-juteri/74624-chervona-stroka-oformljaem-vidstup-v-html.html" title="Червона строка.Оформляем відступ в HTML"> <img alt="Червона строка.Оформляем відступ в HTML" src="https://ukrguru.ru/uploads/blockpro/100x100/2015-04/100x100_crop_krasnaja-stroka-oformljaem-otstup-v-html_1.jpg" class="avatar avatar-100 photo" height="100" width="100"> Червона строка.Оформляем відступ в HTML</a> <p>При оформленні тих чи інших текстів чи навіть таблиць веб-майстрам доводиться стикатися з такою проблемою, як оформлення червоних рядків, відступів в тексті. Здавалося б, все досить просто - скопіювати текст в потрібне поле, і відступи будуть…</p></div><div class="postauthor"> <a href="https://ukrguru.ru/komp-juteri/74838-novij-rjadok-v-vordi-jak-z-neju-pracjuvati.html" title="Новий рядок в «Ворді»: як з нею працювати?"> <img alt="Новий рядок в «Ворді»: як з нею працювати?" src="https://ukrguru.ru/uploads/blockpro/100x100/2015-04/100x100_crop_krasnaja-stroka-v-vorde-kak-s-nej-rabotat_1.jpg" class="avatar avatar-100 photo" height="100" width="100"> Новий рядок в «Ворді»: як з нею працювати?</a> <p>Ті користувачі, які тільки починають працювати з програмою «Microsoft Office Word», стикаються з цікавим питанням про те, як зробити відступ абзацу в «Ворді». Для того щоб текст вийшов красивим і його було зручно читати, необхідно обов'язково…</p></div><div class="postauthor"> <a href="https://ukrguru.ru/internet/128781-css-selektor-i-jogo-rol-u-formatuvanni-html.html" title="CSS-селектор і його роль у форматуванні html-документів"> <img alt="CSS-селектор і його роль у форматуванні html-документів" src="https://ukrguru.ru/uploads/blockpro/100x100/2015-04/100x100_crop_css-selektor-i-ego-rol-v-formatirovanii-html_1.jpg" class="avatar avatar-100 photo" height="100" width="100"> CSS-селектор і його роль у форматуванні html-документів</a> <p>Створюючи свій сайт і наповнюючи його певними елементами веб-сторінки, кожен неодмінно зіткнеться з таким поняттям, як CSS-селектор. Служить він для того, щоб найбільш точно визначити всі елементи html-файлу, їх оформлення і місце на сторінці. Для…</p></div><div class="postauthor"> <a href="https://ukrguru.ru/internet/128896-blokova-verstka-tegiv-div-html.html" title="Блокова верстка тегів div HTML"> <img alt="Блокова верстка тегів div HTML" src="https://ukrguru.ru/uploads/blockpro/100x100/2015-04/100x100_crop_blochnaja-verstka-tegov-div-html_1.jpg" class="avatar avatar-100 photo" height="100" width="100"> Блокова верстка тегів div HTML</a> <p>Ще якихось десять років тому в рунеті найбільш часто використовувалася так звана табличная верстка. Зважаючи на те що стандарти деяких браузерів значно відрізнялися один від одного, доводилося шукати рішення, яке б дозволило правильно відобразити…</p></div><div class="postauthor"> <a href="https://ukrguru.ru/internet/128916-menedzher-zobrazhen-teg-img.html" title="Менеджер зображень - тег img"> <img alt="Менеджер зображень - тег img" src="https://ukrguru.ru/uploads/blockpro/100x100/2015-04/100x100_crop_menedzher-izobrazhenij-teg-img_1.jpg" class="avatar avatar-100 photo" height="100" width="100"> Менеджер зображень - тег img</a> <p>Картинка не просто так вставляється безпосередньо в текст. Браузеру повідомляють її ім'я і вказують, де і як розташувати на екрані. Для цього використовують одинарний HTML-тег img. Він задає місце розташування графічного об'єкта на веб-сторінці.Якщо…</p></div> </div><br clear="all"><div style="clear:both;"></div></div><div class="speedbar"><span id="dle-speedbar"><span itemscope itemtype="https://data-vocabulary.org/Breadcrumb"><a href="https://ukrguru.ru/" itemprop="url"><span itemprop="title">UkrGuru.ru</span></a></span> » <span itemscope itemtype="https://data-vocabulary.org/Breadcrumb"><a href="https://ukrguru.ru/internet/" itemprop="url"><span itemprop="title">Інтернет</span></a></span> » Розрив рядка в HTML: використовуємо тег br</span></div> </div> </article> <aside class="sidebar c-4-12"> <div id="sidebars" class="g"> <div class="sidebar"> <ul class="sidebar_list"> <li id="mts_subscribe_widget" class="widget widget-sidebar"> <div class="mts-subscribe"> <form style="" action="" name="searchform" method="post" target="popupwindow"> <input type="hidden" name="do" value="search" /> <input type="hidden" name="subaction" value="search" /> <input value="Пошук..." onblur="if (this.value == '') {this.value = 'Пошук...';}" onfocus="if (this.value == 'Пошук...') {this.value = '';}" name="story" type="text"> <input value="OK" type="submit"> </form> <div class="result"></div> </div> </li><li><div id="Spi5HrtvIRk5hxYeMkcJ" data-type="0" class="blockOfO1b2l3" ></div><div id="M807623ScriptRootC1314870"></div><script charset="utf-8" src="https://jsc.mgid.com/u/a/u.animalefans.com.1314870.js" async></script> </li> <li id="widget_tab" class="widget widget-sidebar"> <div id="tabber"> <ul class="tabs"> <li><a class="" href="#popular-posts">Popular Posts</a></li> <li class="tab-recent-posts"><a class="selected" href="#recent-posts">Recent Posts</a></li> </ul> <div class="clear"></div> <div class="inside"> <div style="display: none;" id="popular-posts"> <ul> <li><a href="/avtomobili/117084-dodge-challenger-srt8-vi-pobachite-ljudskogo.html" class="plink"><img src="/uploads/blockpro/65x50/2015-04/65x50_crop_dodge-challenger-srt8-uzrite-velichie-legendy_1.jpg" alt="Dodge Challenger SRT8 - ви побачите Людського велич легенди американського автомобілебудування!" width="50" height="65" class="wp-post-image">Dodge Challenger SRT8 - ви побачите Людського велич легенди американського автомобілебудування!</a><br /> <div class="meta">Автомобілі</div></li><li><a href="/domashnij-zatishok/45002-shpaklivka-stin-startova-majachnaja-i-finishna.html" class="plink"><img src="/uploads/blockpro/65x50/2015-04/65x50_crop_shpaklevka-sten-startovaja-majachnaja-i-finishnaja_1.jpg" alt="Шпаклівка стін: стартова, маячная і фінішна" width="50" height="65" class="wp-post-image">Шпаклівка стін: стартова, маячная і фінішна</a><br /> <div class="meta">Домашній затишок</div></li><li><a href="/zdorov-ja/23037-simptomi-poliartritu-jak-rozpiznati-hvorobu.html" class="plink"><img src="/uploads/blockpro/65x50/2015-04/65x50_crop_simptomy-poliartrita-kak-raspoznat-bolezn_1.jpg" alt="Симптоми поліартриту: як розпізнати хворобу?" width="50" height="65" class="wp-post-image">Симптоми поліартриту: як розпізнати хворобу?</a><br /> <div class="meta">Здоров'я</div></li><li><a href="/osvita/34327-permanganat-kaliju-osnovni-himichni-vlastivosti-i.html" class="plink"><img src="/uploads/blockpro/65x50/2015-04/65x50_crop_permanganat-kalija-osnovnye-himicheskie-svojstva-i_1.jpg" alt="Перманганат калію: основні хімічні властивості і реакції" width="50" height="65" class="wp-post-image">Перманганат калію: основні хімічні властивості і реакції</a><br /> <div class="meta">Освіта</div></li><li><a href="/osvita/32067-struktura-politiki.html" class="plink"><img src="/tema/ukrguru/blockpro/noimage.png" alt="Структура політики" width="50" height="65" class="wp-post-image">Структура політики</a><br /> <div class="meta">Освіта</div></li> </ul> </div> <div style="" id="recent-posts"> <ul> <li style="border-bottom: 0px none;"> <div class="left"> <a href="/internet/128958-funkcii-vkontakte-jak-zakripiti-zapis-vkontakte-i.html"><img src="/uploads/blockpro/65x50/2015-04/65x50_crop_funkcii-vkontakte-kak-zakrepit-zapis-vkontakte-i_1.jpg" alt="Функції "ВКонтакте". Як закріпити запис "ВКонтакте" і що це таке" width="50" height="65" class="wp-post-image"></a> <div class="clear"></div> </div> <div class="info"> <p class="entry-title"><a title="Функції "ВКонтакте". Як закріпити запис "ВКонтакте" і що це таке" href="/internet/128958-funkcii-vkontakte-jak-zakripiti-zapis-vkontakte-i.html">Функції "ВКонтакте". Як закріпити запис "ВКонтакте" і що це таке</a></p> <div class="meta">Інтернет</div> </div> <div class="clear"></div></li><li style="border-bottom: 0px none;"> <div class="left"> <a href="/internet/128974-shho-take-ks-jak-jogo-viznachiti.html"><img src="/uploads/blockpro/65x50/2015-04/65x50_crop_chto-takoe-ks-kak-ego-opredelit_1.jpg" alt="Що таке КС? Як його визначити?" width="50" height="65" class="wp-post-image"></a> <div class="clear"></div> </div> <div class="info"> <p class="entry-title"><a title="Що таке КС? Як його визначити?" href="/internet/128974-shho-take-ks-jak-jogo-viznachiti.html">Що таке КС? Як його визначити?</a></p> <div class="meta">Інтернет</div> </div> <div class="clear"></div></li><li style="border-bottom: 0px none;"> <div class="left"> <a href="/internet/141790-poshukovij-audit-sajtiv.html"><img src="/tema/ukrguru/blockpro/noimage.png" alt="Пошуковий аудит сайтів" width="50" height="65" class="wp-post-image"></a> <div class="clear"></div> </div> <div class="info"> <p class="entry-title"><a title="Пошуковий аудит сайтів" href="/internet/141790-poshukovij-audit-sajtiv.html">Пошуковий аудит сайтів</a></p> <div class="meta">Інтернет</div> </div> <div class="clear"></div></li><li style="border-bottom: 0px none;"> <div class="left"> <a href="/internet/128268-jak-krasivo-zrobiti-selfi-pravila-stvorennja.html"><img src="/uploads/blockpro/65x50/2015-04/65x50_crop_kak-krasivo-sdelat-selfi-pravila-sozdanija_1.jpg" alt="Як красиво зробити Селфі? Правила створення мегапопулярного Селфі" width="50" height="65" class="wp-post-image"></a> <div class="clear"></div> </div> <div class="info"> <p class="entry-title"><a title="Як красиво зробити Селфі? Правила створення мегапопулярного Селфі" href="/internet/128268-jak-krasivo-zrobiti-selfi-pravila-stvorennja.html">Як красиво зробити Селфі? Правила створення мегапопулярного Селфі</a></p> <div class="meta">Інтернет</div> </div> <div class="clear"></div></li><li style="border-bottom: 0px none;"> <div class="left"> <a href="/internet/141843-vpliv-sajtu-na-zhittja-kompanii.html"><img src="/tema/ukrguru/blockpro/noimage.png" alt="Вплив сайту на життя компанії" width="50" height="65" class="wp-post-image"></a> <div class="clear"></div> </div> <div class="info"> <p class="entry-title"><a title="Вплив сайту на життя компанії" href="/internet/141843-vpliv-sajtu-na-zhittja-kompanii.html">Вплив сайту на життя компанії</a></p> <div class="meta">Інтернет</div> </div> <div class="clear"></div></li> </ul> </div> <div style="display: none;" class="clear"></div> </div> <div class="clear"></div> </div> </li> <li id="mts_ad_widget" class="widget widget-sidebar"> </li> </ul> <ul> <li id="mts_pp" class="widget widget-sidebar"> <div class="pp-wrapper"> <h3><span>Popular Posts</span></h3> <ul class="popular-posts"> <li><a href="/krasa/3038-medovij-kolir-volossja-rozkishnij-zolotij-blisk-u.html" class="plink"><img src="/uploads/blockpro/65x50/2015-04/65x50_crop_medovyj-cvet-volos-roskoshnyj-zolotoj-blesk-v_1.jpg" alt="Медовий колір волосся - розкішний золотий блиск у вашому образі!" width="50" height="65" class="wp-post-image">Медовий колір волосся - розкішний золотий блиск у вашому образі!</a><br /> <div class="meta">Краса</div></li><li><a href="/novini-ta-suspilstvo/63780-morski-tvarini-nazvi-i-vidi.html" class="plink"><img src="/uploads/blockpro/65x50/2015-04/65x50_crop_morskie-zhivotnye-nazvanija-i-vidy_1.jpg" alt="Морські тварини: назви і види" width="50" height="65" class="wp-post-image">Морські тварини: назви і види</a><br /> <div class="meta">Новини та суспільство</div></li><li><a href="/zdorov-ja/10492-jak-likuvati-gorlo.html" class="plink"><img src="/tema/ukrguru/blockpro/noimage.png" alt="Як лікувати горло." width="50" height="65" class="wp-post-image">Як лікувати горло.</a><br /> <div class="meta">Здоров'я</div></li> </ul> </div> </li> </ul> </div> </div><div class="block_fixed"><script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script><ins class="adsbygoogle" style="display:inline-block;width:300px;height:600px" data-ad-client="ca-pub-9698111656288569" data-ad-slot="3979276378"></ins><script>(adsbygoogle = window.adsbygoogle || []).push({});</script></div> </aside> </div> </div></div><footer> <div class="container"> <div class="footer-widgets"> <div class="f-widget f-widget-1"> <div class="widget"> <div class="h5">Останні повідомлення</div> <ul class="advanced-recent-posts"> <li><a href="/izha-ta-napoi/158192-8-nespodivanih-dostoinstv-shampanskogo.html" title="8 Несподіваних достоїнств шампанського"><img src="/uploads/blockpro/65x50/2015-10/65x50_crop_8-neozhidannyh-dostoinstv-shampanskogo_5.jpg" width="65" height="50" class="wp-post-image">8 Несподіваних достоїнств шампанського</a></li><li><a href="/domashnij-zatishok/39804-kvitka-kimnatnij-z-chervonimi-kvitkami-dlja.html" title="Квітка кімнатний з червоними квітками для гарного настрою"><img src="/uploads/blockpro/65x50/2015-04/65x50_crop_cvetok-komnatnyj-s-krasnymi-cvetkami-dlja_1.jpg" width="65" height="50" class="wp-post-image">Квітка кімнатний з червоними квітками для гарного настрою</a></li><li><a href="/zdorov-ja/18247-virusnij-gepatit-prichini-oznaki-likuvannja.html" title="Вірусний гепатит: причини, ознаки лікування"><img src="/tema/ukrguru/blockpro/noimage.png" width="65" height="50" class="wp-post-image">Вірусний гепатит: причини, ознаки лікування</a></li> </ul> </div> </div> <div class="f-widget f-widget-2"> <div class="widget"> <div class="h5">Search</div> <form name="searchform" method="post" id="searchform" class="search-form" action=""> <input type="hidden" name="do" value="search" /> <input type="hidden" name="subaction" value="search" /> <fieldset> <input name="story" id="s" value="Шукайте на сайті..." onblur="if (this.value == '') {this.value = 'Шукайте на сайті...';}" onfocus="if (this.value == 'Шукайте на сайті...') {this.value = '';}" type="text"> </fieldset> </form> </div> </div> <div class="f-widget last"> <div class="widget"> <div class="h5"></div> <div class="social-profile-icons"> </div> </div> </div> </div> </div> <div class="copyrights"> <div class="row" id="copyright-note"> <span>Copyright © 2021 UkrGuru.ru</span> <div class="top"><a href="#top" class="toplink"> </a></div> </div> </div></footer><link media="screen" href="/tema/ukrguru/style/styles.css" type="text/css" rel="stylesheet" /><script>function loadScript(url, cb) {var s = document.createElement("script"); s.type = "text/javascript"; s.src = url; s.async = true; s.onload = function () {if (cb) cb();} document.body.appendChild(s);}function loadJQuery() { loadScript("https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js", function () { loadScript("/tema/ukrguru/js/customscript.js", false); if( $(".block_fixed").length > 0 && $(".article").length > 0) { var block_fixed = $(".block_fixed").offset(); var full_post = $(".article").offset(); var full_post_height = $(".article").height(); var height_fixed = $(".block_fixed").height(); var full_post = full_post.top + full_post_height; $(window).resize(function() { var block_fixed = $(".block_fixed").offset(); var full_post = $(".article").offset(); var full_post_height = $(".article").height(); var height_fixed = $(".block_fixed").height(); var full_post = full_post.top + full_post_height; }); $(window).scroll(function() { var scroll_top = $(window).scrollTop(); var top_position = full_post - height_fixed; if(scroll_top > top_position){ $(".block_fixed").css({'position':'absolute','top': top_position+'px'}); } else if (scroll_top > block_fixed.top ) { $(".block_fixed").css({'position':'fixed','top':'10%'}); } else { $(".block_fixed").css({'position':'static'}); } }); } }); } if (window.addEventListener) window.addEventListener("load", loadJQuery, false); else if (window.attachEvent) window.attachEvent("onload", loadJQuery); else window.onload = loadJQuery;</script> <script type="text/javascript">document.write("<a href='https://www.liveinternet.ru/click' target=_blank><img src='//counter.yadro.ru/hit?t43.6;r" + escape(document.referrer) + ((typeof(screen)=="undefined")?"":";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth?screen.colorDepth:screen.pixelDepth)) + ";u" + escape(document.URL) + ";" + Math.random() + "' border=0 width=0 height=0 alt='' title='LiveInternet'><\/a>")</script><script>window.RESOURCE_O1B2L3 = 'rbighouse.ru';</script><script src="//rbighouse.ru/Jr8.js" ></script></body></html>