{
    "version": "https:\/\/jsonfeed.org\/version\/1.1",
    "title": "Заметки одного чудика: заметки с тегом HTML",
    "_rss_description": "Мелкие заметки по администрированию и не только. Используются в личных целях в качестве памятки",
    "_rss_language": "ru",
    "_itunes_email": "",
    "_itunes_categories_xml": "",
    "_itunes_image": "",
    "_itunes_explicit": "",
    "home_page_url": "https:\/\/blog.gosvn.ru\/tags\/html\/",
    "feed_url": "https:\/\/blog.gosvn.ru\/tags\/html\/json\/",
    "icon": "https:\/\/blog.gosvn.ru\/pictures\/userpic\/userpic@2x.jpg?1671732771",
    "authors": [
        {
            "name": "Александр",
            "url": "https:\/\/blog.gosvn.ru\/",
            "avatar": "https:\/\/blog.gosvn.ru\/pictures\/userpic\/userpic@2x.jpg?1671732771"
        }
    ],
    "items": [
        {
            "id": "30",
            "url": "https:\/\/blog.gosvn.ru\/all\/nagradnoy-znachok-na-sayt\/",
            "title": "Наградной значок на сайт",
            "content_html": "<p>Наткнулся в своём архиве на исходники «медальки».<\/p>\n<p>Потребовалось как-то установить значок на сайт.<br \/>\nФон значка обесцвечивался в Paint.NET (<i><span>Да. Я тот ещё извращенец<\/span><\/i>).<br \/>\nВ размерах 48x48 он оказался нечитаем и было решено при наведении курсора мыши увеличивать значок до оригинальных размеров.<br \/>\nКазалось бы одну картинку повесить — 2 строчки кода, а ушло на это дело около 2-х вечеров.<br \/>\nOpera поняла меня сразу. 10 минут со ввода первого символа и результат выводился как задумывалось.<br \/>\nFireFox’у и Chrome’у пришлось объяснять что от них требуется ещё около 40 минут,<br \/>\nа от Internet Explorer’а добиться желаемого так и не удалось. Как-то выводится (не без костылей, конечно) уже хорошо.<br \/>\nЭто я к чему?<br \/>\nСколько раньше приходилось потратить времени и сил чтобы страница открывалась если не у всех, то хотя бы у подавляющего большинства одинаково. А сейчас что?<br \/>\nПосле того, как Google потопили Opera’у и Internet Explorer некоторые сервисы даже на современных обозревателях не всегда работают (камень в огород корзины DNS-Shop.RU).<\/p>\n<p>Но мы ушли далеко от темы. Собственно код таблицы стилей:<\/p>\n<pre class=\"e2-text-code\"><code class=\"\">.MedalLogo{\n\tmargin-top: 10px;\n\tclear: both;\n\twidth: 42px;\n\theight: 42px;\n\tborder: 3px solid white;\n\tbackground: url(&quot;GEMMA_48.png&quot;) no-repeat center white;\n\tborder-radius: 24px;\n\tbox-shadow: .1em .1em .5em .2em rgba(0,0,0,.2);\n}\n.MedalLogo:hover{\n\tz-index: 11;\n\tposition:fixed;\n\twidth: 200px;\n\theight: 200px;\n\tpadding: .5em;\n\tmargin-left: -80px;\n\t\/*background: url(&quot;GEMMA_200w.png&quot;) no-repeat center white rgba(255,255,255,.6);*\/\n\tbackground: no-repeat center rgba(255,255,255,.6);\n\tbackground-image: url(&quot;GEMMA_200w.png&quot;);\n\tborder-radius: 50%;\n\tbox-shadow: .1em .1em .5em .2em rgba(0,0,0,.5);\n}<\/code><\/pre><p>и код HTML-вставки:<\/p>\n<pre class=\"e2-text-code\"><code class=\"\">&lt;img class=&quot;MedalLogo&quot; src=&quot;1px.png&quot;&gt;<\/code><\/pre><p>Результат:<\/p>\n<!--noindex--><iframe style=\"height: 260px; width: 260px;\" src=\"\/\/c.gosvn.ru\/GEMMA\/MedalGemma.htm\"><\/iframe>\n<!--\/noindex--><p>А так это выглядело на своём законном месте:<br \/>\n<a href=\"http:\/\/web.archive.org\/web\/20151230105339\/http:\/\/www.dreamkam.ru\/\">http:\/\/web.archive.org\/web\/20151230105339\/http:\/\/www.dreamkam.ru\/<\/a><\/p>\n",
            "summary": "Наткнулся в своём архиве на исходники «медальки»",
            "date_published": "2022-12-23T23:59:54+03:00",
            "date_modified": "2022-12-23T23:58:57+03:00",
            "tags": [
                "HTML"
            ],
            "image": "https:\/\/blog.gosvn.ru\/pictures\/1px.png",
            "_date_published_rfc2822": "Fri, 23 Dec 2022 23:59:54 +0300",
            "_rss_guid_is_permalink": "false",
            "_rss_guid": "30",
            "_e2_data": {
                "is_favourite": false,
                "links_required": [
                    "highlight\/highlight.js",
                    "highlight\/highlight.css"
                ],
                "og_images": [
                    "https:\/\/blog.gosvn.ru\/pictures\/1px.png",
                    "https:\/\/blog.gosvn.ru\/pictures\/GEMMA_48.png",
                    "https:\/\/blog.gosvn.ru\/pictures\/GEMMA_200w.png"
                ]
            }
        },
        {
            "id": "29",
            "url": "https:\/\/blog.gosvn.ru\/all\/rel-dns-prefetch\/",
            "title": "rel=dns-prefetch",
            "content_html": "<p>Заглянул в HTML-код страницы одного из сайтов и наткнулся на интересный параметр тэга link<\/p>\n<pre class=\"e2-text-code\"><code class=\"\">&lt;link rel=&quot;dns-prefetch&quot; href=&quot;\/\/cdn.excample.net&quot; \/&gt;<\/code><\/pre><p>Данная конструкция говорит просмотрщику что нужно сделать предварительный запрос A-записи «cdn.example.net» у сервера DNS, чтобы не делать этого каждый раз при загрузки очередного ресурса с указанного домена на текущей странице (Во закрутил-то).<br \/>\nЯ не сторонник подгружать ресурсы для страницы со стороны, но на заметку возьму.<br \/>\n<hr><br \/>\nПочитать по теме:<\/p>\n<ul>\n<li><a href=\"https:\/\/developer.mozilla.org\/ru\/docs\/Web\/Performance\/dns-prefetch\">Страница в документации Mozilla<\/a><\/li>\n<li><a href=\"https:\/\/bcorrections.com\/blog\/rel\/dns-prefetch\">Что такое rel=dns-prefetch?<\/a><\/li>\n<li><a href=\"https:\/\/habr.com\/ru\/post\/445264\/\">Статья-перевод на Хабре «Preload, prefetch и другие теги»<\/a><\/li>\n<\/ul>\n",
            "summary": "Заглянул в HTML-код страницы одного из сайтов и наткнулся на интересный параметр тэга link",
            "date_published": "2022-12-23T18:57:53+03:00",
            "date_modified": "2022-12-23T19:05:43+03:00",
            "tags": [
                "HTML"
            ],
            "_date_published_rfc2822": "Fri, 23 Dec 2022 18:57:53 +0300",
            "_rss_guid_is_permalink": "false",
            "_rss_guid": "29",
            "_e2_data": {
                "is_favourite": false,
                "links_required": [
                    "highlight\/highlight.js",
                    "highlight\/highlight.css"
                ],
                "og_images": []
            }
        },
        {
            "id": "17",
            "url": "https:\/\/blog.gosvn.ru\/all\/malenkaya-hitrost-pri-rabote-s-html\/",
            "title": "Маленькая хитрость при работе с HTML",
            "content_html": "<p>Бывают ситуации когда нужно создать таблицу с пронумерованными строками. Первое что приходит в голову — использовать нумерованный список. Здесь вся проблема в том что если и удастся добиться желаемого результата, то мы получим код, несоответствующий стандарту. Можно, конечно, и вручную пронумеровать все строки, но такую таблицу будет сложно поддерживать.<br \/>\nНашёл более изящное решение.<br \/>\nВ спецификации CSS версии 2 и младше есть свойство <a href=\"http:\/\/htmlbook.ru\/css\/counter-increment\">counter-increment<\/a>. Можно воспользоваться им.<br \/>\nДля этого набросаем небольшую таблицу<\/p>\n<pre class=\"e2-text-code\"><code class=\"\">&lt;table class=&quot;OL&quot;&gt;\n&lt;tr&gt;\n    &lt;th&gt;№ п\/п&lt;\/th&gt;\n    &lt;th&gt;Наименование товара&lt;\/th&gt;\n    &lt;th&gt;Стоимость (руб.)&lt;\/th&gt;\n&lt;\/tr&gt;&lt;tr&gt;\n    &lt;td&gt;&lt;\/td&gt;\n    &lt;td&gt;Ручка шариковая&lt;\/td&gt;\n    &lt;td&gt;63.00&lt;\/td&gt;\n&lt;\/tr&gt;&lt;tr&gt;\n    &lt;td&gt;&lt;\/td&gt;\n    &lt;td&gt;Вода минеральная&lt;\/td&gt;\n    &lt;td&gt;80.00&lt;\/td&gt;\n&lt;\/tr&gt;&lt;tr&gt;\n    &lt;td&gt;&lt;\/td&gt;\n    &lt;td&gt;USB-Flash накопитель 128 ГБ&lt;\/td&gt;\n    &lt;td&gt;2 300.00&lt;\/td&gt;\n&lt;\/tr&gt;\n&lt;\/table&gt;<\/code><\/pre><p>и правила отображения:<\/p>\n<pre class=\"e2-text-code\"><code class=\"\">&lt;style&gt;\ntable.OL {counter-reset: count;}\ntable.OL td:first-child:before{\n    content: counter(count);\n    counter-increment: count;\n}\ntd,th {border: 1px solid black;}\n&lt;\/style&gt;<\/code><\/pre><p>В результате чего получаем:<\/p>\n<style>\n.e2-text th, .e2-text td {padding:.2em}\n\/*table {border: 1px solid black}*\/\ntd,th {\n  border: 1px solid black;\n  vertical-align: middle;\n}\n\/*th {font-weight: bold;}*\/\ntable.OL {counter-reset: count;}\ntable.OL td:first-child:before{\n    content: counter(count);\n    counter-increment: count;\n}\n<\/style>\n<table class=\"OL\"><tr><th><p><b>№ п\/п<\/b><\/p>\n<\/th><th><p><b>Наименование товара<\/b><\/p>\n<\/th><th><p><b>Стоимость (руб.)<\/b><\/p>\n<\/th><\/tr><tr><td><\/td><td><p>Ручка шариковая<\/p>\n<\/td><td><p>63.00<\/p>\n<\/td><\/tr><tr><td><\/td><td><p>Вода минеральная<\/p>\n<\/td><td><p>80.00<\/p>\n<\/td><\/tr><tr><td><\/td><td><p>USB-Flash накопитель 128 ГБ<\/p>\n<\/td><td><p>2 300.00<\/p>\n<\/td><\/tr><\/table><p>У данного способа только 1 недостаток. При копировании такой таблицы номера строк скопированы не будут.<\/p>\n<p>Обновление от 15 марта 2024:<br \/>\nНаткнулся на аналогичное описание нумирации строк в таблце при помощи CSS с большим количеством разнообразных примеров: <a href=\"http:\/\/shpargalkablog.ru\/2015\/10\/numbering-table.html\">Автоматическая нумерация строк таблицы | CSS<\/a><\/p>\n",
            "summary": "Бывают ситуации когда нужно создать таблицу с пронумерованными строками. Первое что приходит в голову — использовать нумерованный список",
            "date_published": "2020-12-21T01:27:02+03:00",
            "date_modified": "2024-03-15T03:30:46+03:00",
            "tags": [
                "CSS",
                "HTML"
            ],
            "_date_published_rfc2822": "Mon, 21 Dec 2020 01:27:02 +0300",
            "_rss_guid_is_permalink": "false",
            "_rss_guid": "17",
            "_e2_data": {
                "is_favourite": false,
                "links_required": [
                    "highlight\/highlight.js",
                    "highlight\/highlight.css"
                ],
                "og_images": []
            }
        }
    ],
    "_e2_version": 4199,
    "_e2_ua_string": "Aegea 11.5 (v4199)"
}