{"componentChunkName":"component---src-templates-material-js","path":"/workshops/2021/06/18/pishem-svoego-robota-na-python-urok-9/index.html","result":{"pageContext":{"pageParameters":{"isPreview":false,"isMirror":true,"delay_to_show_donate_popup_seconds":7,"about_page":false,"games_page":true,"games_page_link_in_header":false,"donate_popup_show_ru":true,"donate_popup_title_ru":"Без вас — нас не будет","donate_popup_content_ru":"Помогите нам добывать и рассказывать важные истории. Участие каждого — важно!","donate_popup_show_en":true,"donate_popup_title_en":"We can’t do it alone!","donate_popup_content_en":"Help us uncover and share the stories that matter. Every contribution makes a difference","display_regular_donors_banner":false,"showPatreonMethod":true,"useNewMaterialDonationBanner":true,"new_donations_page_design":true,"donations_popup_variants":{"ru":[{"id":"kc19b","title":"Сохраните журналистику для людей в России ","subtitle":"Читают нас прежде всего люди в России, но будущее «Важных историй» зависит от тех, кто живет за пределами страны. Поддержите нас ежемесячным донатом — сохраните независимую журналистику для ваших близких, которые остаются в России.","is_active":true,"background":"linear-gradient(10deg, #421f20 5%, #994146)"},{"id":"33tc9","title":"У пропаганды есть миллиарды из бюджета. У нас — только вы","subtitle":"Перемены возможны, если независимые от власти журналисты продолжают свою работу день за днем, год за годом. Мы рассказываем важные истории уже шесть лет. Помогите нам продолжать.","is_active":true,"background":"linear-gradient(10deg, #421f20 5%, #994146)"}],"en":[{"id":"nj1py","title":"Important stories don’t tell themselves","subtitle":"Independent journalism comes at a cost. We answer to no owners or advertisers — only to you, our readers.  Your ongoing support allows us to keep exposing the truth. Without you, we won’t be here.","is_active":true,"background":"linear-gradient(10deg, #421f20 5%, #994146)"},{"id":"xdfc1","title":"Help us outlast the Kremlin censorship","subtitle":"Censorship lose to journalism that keeps showing up, year after year. Monthly donors are what make that possible","is_active":true,"background":"linear-gradient(10deg, #421f20 5%, #994146)"},{"id":"ck121","title":"State propaganda has billions to spend. We have only you to rely on","subtitle":"Change happens when independent journalists keep showing up — day after day, year after year. Six years in, we're still showing up. Help us keep going with a monthly donation.","is_active":true,"background":"linear-gradient(10deg, #421f20 5%, #994146)"}]},"feedback_page":true,"donorsCount":0,"showAuthorsRequestAfterMaterial":true,"radioPage":true,"radioExists":{"ru":true,"en":false},"singlePlaylistPath":{"ru":"/radio/2025/12/22/razgovori-ovazhnikh/index.html"},"with_bookmarks":true,"news_feed":true,"news_feed_skeleton":false,"news_page_redesign":true,"with_topics":true,"materials_topics":false,"topics_page":true,"with_pdf_share":false,"with_native_share":false,"preferred_source_page":true,"charon_new_form":true,"preferred_source_promos":true,"charon_en_page":true},"pk":280,"header":"Пишем своего робота на Python. Урок 9","lead":"Учимся верстать таблицы с помощью HTML и CSS ","category":"workshops","entry_image":[{"format":"webp","url_1x":"https://static.istories.media/uploaded/images/c2d8e505eeed434a9582cc7315bc3664-1920x960px_1x.webp","url_2x":"https://static.istories.media/uploaded/images/c2d8e505eeed434a9582cc7315bc3664-1920x960px_2x.webp","for_width":1920,"for_height":960,"real_width_1x":1920,"real_width_2x":3840,"real_height_1x":960,"real_height_2x":1920},{"format":"jpg","url_1x":"https://static.istories.media/uploaded/images/c2d8e505eeed434a9582cc7315bc3664-1920x960px_1x.jpg","url_2x":"https://static.istories.media/uploaded/images/c2d8e505eeed434a9582cc7315bc3664-1920x960px_2x.jpg","for_width":1920,"for_height":960,"real_width_1x":1920,"real_width_2x":3840,"real_height_1x":960,"real_height_2x":1920},{"format":"webp","url_1x":"https://static.istories.media/uploaded/images/c2d8e505eeed434a9582cc7315bc3664-1272x636px_1x.webp","url_2x":"https://static.istories.media/uploaded/images/c2d8e505eeed434a9582cc7315bc3664-1272x636px_2x.webp","for_width":1272,"for_height":636,"real_width_1x":1272,"real_width_2x":2544,"real_height_1x":636,"real_height_2x":1272},{"format":"jpg","url_1x":"https://static.istories.media/uploaded/images/c2d8e505eeed434a9582cc7315bc3664-1272x636px_1x.jpg","url_2x":"https://static.istories.media/uploaded/images/c2d8e505eeed434a9582cc7315bc3664-1272x636px_2x.jpg","for_width":1272,"for_height":636,"real_width_1x":1272,"real_width_2x":2544,"real_height_1x":636,"real_height_2x":1272},{"format":"webp","url_1x":"https://static.istories.media/uploaded/images/c2d8e505eeed434a9582cc7315bc3664-912x456px_1x.webp","url_2x":"https://static.istories.media/uploaded/images/c2d8e505eeed434a9582cc7315bc3664-912x456px_2x.webp","for_width":912,"for_height":456,"real_width_1x":912,"real_width_2x":1824,"real_height_1x":456,"real_height_2x":912},{"format":"jpg","url_1x":"https://static.istories.media/uploaded/images/c2d8e505eeed434a9582cc7315bc3664-912x456px_1x.jpg","url_2x":"https://static.istories.media/uploaded/images/c2d8e505eeed434a9582cc7315bc3664-912x456px_2x.jpg","for_width":912,"for_height":456,"real_width_1x":912,"real_width_2x":1824,"real_height_1x":456,"real_height_2x":912},{"format":"webp","url_1x":"https://static.istories.media/uploaded/images/c2d8e505eeed434a9582cc7315bc3664-600x400px_1x.webp","url_2x":"https://static.istories.media/uploaded/images/c2d8e505eeed434a9582cc7315bc3664-600x400px_2x.webp","for_width":600,"for_height":400,"real_width_1x":600,"real_width_2x":1200,"real_height_1x":400,"real_height_2x":800},{"format":"jpg","url_1x":"https://static.istories.media/uploaded/images/c2d8e505eeed434a9582cc7315bc3664-600x400px_1x.jpg","url_2x":"https://static.istories.media/uploaded/images/c2d8e505eeed434a9582cc7315bc3664-600x400px_2x.jpg","for_width":600,"for_height":400,"real_width_1x":600,"real_width_2x":1200,"real_height_1x":400,"real_height_2x":800},{"format":"webp","url_1x":"https://static.istories.media/uploaded/images/c2d8e505eeed434a9582cc7315bc3664-360x360px_1x.webp","url_2x":"https://static.istories.media/uploaded/images/c2d8e505eeed434a9582cc7315bc3664-360x360px_2x.webp","for_width":360,"for_height":360,"real_width_1x":360,"real_width_2x":720,"real_height_1x":360,"real_height_2x":720},{"format":"jpg","url_1x":"https://static.istories.media/uploaded/images/c2d8e505eeed434a9582cc7315bc3664-360x360px_1x.jpg","url_2x":"https://static.istories.media/uploaded/images/c2d8e505eeed434a9582cc7315bc3664-360x360px_2x.jpg","for_width":360,"for_height":360,"real_width_1x":360,"real_width_2x":720,"real_height_1x":360,"real_height_2x":720}],"entry_image_credit":"","blocks":[{"data":"Наш робот, написанный на языке Python, уже умеет собирать крупнейшие госконтракты, заключенные в России. Нам осталось научить его упаковывать данные в удобную для чтения таблицу и затем отправлять ее на почту. На сегодняшнем уроке мы научимся основам языков для верстки сайтов <strong>HTML</strong> и <strong>CSS</strong> и создадим с помощью них таблицу.","type":"p","className":""},{"data":{"id":2526,"data":{"url":"https://www.youtube.com/embed/9fxUKqKgeRA","caption":"Видео: Глеб Лиманский","provider":"youtube","rawInput":"https://www.youtube.com/watch?v=9fxUKqKgeRA","ratio_mobile":"16:9","ratio_desktop":"16:9"},"category":"video-embed"},"type":"video-embed"},{"data":"С помощью языка HTML создается каркас веб-страницы, которую вы видите в браузере. Любая страница сайта это HTML код: браузер его читает и отображает содержимое в удобном для пользователя виде. HTML код в свою очередь состоит из HTML-тегов (еще их можно называть элементы). Они создаются по принципу иерархии. Например, как в научных работах есть строгие правила оформления: название работы, название главы, параграфа и так далее. Разница только в том, что большинство тегов HTML открываются и закрываются. Давайте посмотрим, как это работает на примере верстки нашей первой таблицы.","type":"p","className":""},{"data":"Открываем Visual Studio Code, где мы работаем над нашим роботом. Для начала нужно установить расширение Live server, чтобы мы могли смотреть, как отображается наш HTML-код в браузере. Затем создаем новый документ в формате html.","type":"p","className":""},{"data":{"id":2515,"data":{"images":[{"imagesList":[{"format":"webp","url_1x":"https://static.istories.media/uploaded/images/cb2c23cf5a1a460e84ec3215ece9d3c5-1200xautopx_1x.webp","url_2x":"https://static.istories.media/uploaded/images/cb2c23cf5a1a460e84ec3215ece9d3c5-1200xautopx_2x.webp","for_width":1200,"for_height":"auto","real_width_1x":1200,"real_width_2x":2400,"real_height_1x":431,"real_height_2x":862},{"format":"png","url_1x":"https://static.istories.media/uploaded/images/cb2c23cf5a1a460e84ec3215ece9d3c5-1200xautopx_1x.png","url_2x":"https://static.istories.media/uploaded/images/cb2c23cf5a1a460e84ec3215ece9d3c5-1200xautopx_2x.png","for_width":1200,"for_height":"auto","real_width_1x":1200,"real_width_2x":2400,"real_height_1x":431,"real_height_2x":862}]},{"imagesList":[{"format":"webp","url_1x":"https://static.istories.media/uploaded/images/eecac6ef504d40658ec3dd1baf09022c-1200xautopx_1x.webp","url_2x":"https://static.istories.media/uploaded/images/eecac6ef504d40658ec3dd1baf09022c-1200xautopx_2x.webp","for_width":1200,"for_height":"auto","real_width_1x":1200,"real_width_2x":2400,"real_height_1x":454,"real_height_2x":910},{"format":"png","url_1x":"https://static.istories.media/uploaded/images/eecac6ef504d40658ec3dd1baf09022c-1200xautopx_1x.png","url_2x":"https://static.istories.media/uploaded/images/eecac6ef504d40658ec3dd1baf09022c-1200xautopx_2x.png","for_width":1200,"for_height":"auto","real_width_1x":1200,"real_width_2x":2400,"real_height_1x":454,"real_height_2x":910}]}]},"category":"two-images-embed"},"type":"two-images-embed"},{"data":"Сначала мы пишем самый высший в иерархии тег <strong>&lt;html&gt;</strong> : в нем будет содержаться вся информация нашей веб-страницы. Имя тегов мы пишем в так называемых уголках меньше <strong>&lt;</strong> чем и больше чем <strong>&gt;</strong>. У закрывающего тега добавляется перед именем слэш <strong>&lt;/html&gt;</strong>. Закрывающий тег одного элемента располагается либо на одном уровне с открывающим, либо, как мы увидим позже, может быть в конце текста. Теги HTML на одном уровне. ","type":"p","className":""},{"data":{"id":2517,"data":{"images":[{"imagesList":[{"format":"webp","url_1x":"https://static.istories.media/uploaded/images/ff37702790a4418294b4ae7aee14f162-1200xautopx_1x.webp","url_2x":"https://static.istories.media/uploaded/images/ff37702790a4418294b4ae7aee14f162-1200xautopx_2x.webp","for_width":1200,"for_height":"auto","real_width_1x":1200,"real_width_2x":2400,"real_height_1x":285,"real_height_2x":570},{"format":"png","url_1x":"https://static.istories.media/uploaded/images/ff37702790a4418294b4ae7aee14f162-1200xautopx_1x.png","url_2x":"https://static.istories.media/uploaded/images/ff37702790a4418294b4ae7aee14f162-1200xautopx_2x.png","for_width":1200,"for_height":"auto","real_width_1x":1200,"real_width_2x":2400,"real_height_1x":285,"real_height_2x":570}]}]},"category":"image-embed"},"type":"image-embed"},{"data":"Теперь спускаемся ниже в HTML-иерархии. Следующий градостроительный тег называется &lt;<strong>head&gt;</strong>&nbsp;и будет содержать метаинформацию о странице. Тегам можно задавать определенные характеристики с помощью их атрибутов. В теге &lt;<strong>meta&gt;</strong>&nbsp;с помощью атрибута <strong>charset</strong> задаем стандартную кодировку UTF-8. <strong>&lt;meta&gt;</strong> — это пример не закрывающегося тега. Затем в теге <strong>title</strong> пишем название нашей страницы: например, Моя таблица. Закрываем тег &lt;<strong>title&gt;</strong> на этой же строке.","type":"p","className":""},{"data":{"id":2518,"data":{"images":[{"imagesList":[{"format":"webp","url_1x":"https://static.istories.media/uploaded/images/df04777a300f42f299e79733582b5bda-1200xautopx_1x.webp","url_2x":"https://static.istories.media/uploaded/images/df04777a300f42f299e79733582b5bda-1200xautopx_2x.webp","for_width":1200,"for_height":"auto","real_width_1x":1200,"real_width_2x":2400,"real_height_1x":320,"real_height_2x":639},{"format":"png","url_1x":"https://static.istories.media/uploaded/images/df04777a300f42f299e79733582b5bda-1200xautopx_1x.png","url_2x":"https://static.istories.media/uploaded/images/df04777a300f42f299e79733582b5bda-1200xautopx_2x.png","for_width":1200,"for_height":"auto","real_width_1x":1200,"real_width_2x":2400,"real_height_1x":320,"real_height_2x":639}]}]},"category":"image-embed"},"type":"image-embed"},{"data":"Второй основной блок внутри главного тега &lt;<strong>html&gt;</strong> после &lt;<strong>head&gt;</strong> — это тело HTML-документа, тег &lt;<strong>body&gt;</strong>. Сегодня мы хотим, чтобы информация на нашей странице была представлена в табличном виде. Для этого открываем тег &lt;<strong>table&gt;. </strong>Дальше создаем строки таблицы c помощью тега <strong>&lt;tr&gt;</strong>. В первой строке в ячейках у нас будут заголовки: их мы определяем тегами &lt;<strong>th&gt;</strong>. Сделаем пока несколько условных заголовков: Заказчик, Предмет контракта, Сумма контракта, Поставщик. ","type":"p","className":""},{"data":{"id":2519,"data":{"images":[{"imagesList":[{"format":"webp","url_1x":"https://static.istories.media/uploaded/images/e812c4a8b7704d39b82aca1ad6537823-1200xautopx_1x.webp","url_2x":"https://static.istories.media/uploaded/images/e812c4a8b7704d39b82aca1ad6537823-1200xautopx_2x.webp","for_width":1200,"for_height":"auto","real_width_1x":1200,"real_width_2x":2400,"real_height_1x":1166,"real_height_2x":2332},{"format":"png","url_1x":"https://static.istories.media/uploaded/images/e812c4a8b7704d39b82aca1ad6537823-1200xautopx_1x.png","url_2x":"https://static.istories.media/uploaded/images/e812c4a8b7704d39b82aca1ad6537823-1200xautopx_2x.png","for_width":1200,"for_height":"auto","real_width_1x":1200,"real_width_2x":2400,"real_height_1x":1166,"real_height_2x":2332}]}]},"category":"image-embed"},"type":"image-embed"},{"data":"Давайте посмотрим, что у нас уже получилось. Для этого сохраним изменения (file—save или комбинацией клавиш command+S). И нажмием в правом нижнем угле go live, чтобы с помощью расширения, которое мы установили, перейти к просмотру кода HTML через отображение в браузере. Чтобы видеть изменения в браузере, нужно каждый раз сохранять их в документе. Добавим тегу &lt;<strong>table&gt;</strong> атрибут с шириной таблицы (<strong>style=\"width:100%;\"</strong>) и сделаем ее на все 100%. Это будет единственный элемент стиля, который мы добавим в сам HTML-код сегодня.","type":"p","className":""},{"data":{"id":2520,"data":{"images":[{"imagesList":[{"format":"webp","url_1x":"https://static.istories.media/uploaded/images/0ea8bebe4fd04293825192c46a12875f-1200xautopx_1x.webp","url_2x":"https://static.istories.media/uploaded/images/0ea8bebe4fd04293825192c46a12875f-1200xautopx_2x.webp","for_width":1200,"for_height":"auto","real_width_1x":1200,"real_width_2x":2400,"real_height_1x":374,"real_height_2x":748},{"format":"png","url_1x":"https://static.istories.media/uploaded/images/0ea8bebe4fd04293825192c46a12875f-1200xautopx_1x.png","url_2x":"https://static.istories.media/uploaded/images/0ea8bebe4fd04293825192c46a12875f-1200xautopx_2x.png","for_width":1200,"for_height":"auto","real_width_1x":1200,"real_width_2x":2400,"real_height_1x":374,"real_height_2x":748}]}]},"category":"image-embed"},"type":"image-embed"},{"data":"Создадим еще одну строку в таблице, но уже с простыми ячейками, не заголовками — их мы определяем тегом &lt;<strong>td&gt;</strong>. Я пропишу 5 таких строк с данными о крупнейших госконтрактах из одной из наших рассылок. Добавить заголовок с помощью тега &lt;<strong>h2&gt;</strong> перед тегом &lt;<strong>table&gt;</strong>, потому что это уже не часть таблицы (заголовочные теги — от <strong>&lt;h1&gt;</strong> до <strong>&lt;h6&gt;</strong>).","type":"p","className":""},{"data":{"id":2522,"data":{"images":[{"imagesList":[{"format":"webp","url_1x":"https://static.istories.media/uploaded/images/ed997d26993b4a65bf37b4668d587a8a-1200xautopx_1x.webp","url_2x":"https://static.istories.media/uploaded/images/ed997d26993b4a65bf37b4668d587a8a-1200xautopx_2x.webp","for_width":1200,"for_height":"auto","real_width_1x":1200,"real_width_2x":2400,"real_height_1x":664,"real_height_2x":1330},{"format":"png","url_1x":"https://static.istories.media/uploaded/images/ed997d26993b4a65bf37b4668d587a8a-1200xautopx_1x.png","url_2x":"https://static.istories.media/uploaded/images/ed997d26993b4a65bf37b4668d587a8a-1200xautopx_2x.png","for_width":1200,"for_height":"auto","real_width_1x":1200,"real_width_2x":2400,"real_height_1x":664,"real_height_2x":1330}]}]},"category":"image-embed"},"type":"image-embed"},{"data":"Теперь поработаем над внешним видом таблицы. Мы уже задали один атрибут стиля таблице и отформатировали ее ширину прямо в коде html. Но для этих целей удобнее использовать язык описания внешнего вида HTML-документа — <strong>CSS</strong>. Если HTML структурирует документ, упорядочивает информацию, то CSS в свою очередь красиво оформляет этот документ.","type":"p","className":""},{"data":"Стили или правила оформления нашей HTML-страницы удобно прописывать в отдельном файле: затем получившеюся таблицу стилей можно будет использовать для многих страниц. Но можно прописать стили и в самом коде HTML с помощью тегов <strong>&lt;style&gt;</strong>. Мы создадим отдельный файл в формате css.","type":"p","className":""},{"data":"Чтобы наш HTML-код знал откуда брать стили для таблицы, нужно подключить к нему таблицу стилей. Для этого в метаинформации нашей страницы — теге <strong>head</strong> — мы добавляем тег <strong>link</strong> c атрибутом <strong>rel</strong> (relation — то есть так мы определяем отношение между кодом html и подключаемым файлом). В нашем случае это <strong>stylesheet</strong>, таблица стилей. В атрибуте <strong>href</strong> указываем название нашего файла.","type":"p","className":""},{"data":{"id":2523,"data":{"images":[{"imagesList":[{"format":"webp","url_1x":"https://static.istories.media/uploaded/images/16718f0c72ba4da49033b6436846b83a-1200xautopx_1x.webp","url_2x":"https://static.istories.media/uploaded/images/16718f0c72ba4da49033b6436846b83a-1200xautopx_2x.webp","for_width":1200,"for_height":"auto","real_width_1x":1200,"real_width_2x":2400,"real_height_1x":416,"real_height_2x":833},{"format":"png","url_1x":"https://static.istories.media/uploaded/images/16718f0c72ba4da49033b6436846b83a-1200xautopx_1x.png","url_2x":"https://static.istories.media/uploaded/images/16718f0c72ba4da49033b6436846b83a-1200xautopx_2x.png","for_width":1200,"for_height":"auto","real_width_1x":1200,"real_width_2x":2400,"real_height_1x":416,"real_height_2x":833}]}]},"category":"image-embed"},"type":"image-embed"},{"data":"Давайте посмотрим на простейших правилах стиля, что умеет язык <strong>CSS</strong>. Правила в таблице стилей мы задаем с помощью фигурных скобок  {}. Перед открывающейся скобкой указываем, к какому HTML-элементу мы хотим применить эти правила. Изменим цвет (<strong>color</strong>): к заголовку таблицы и первой строке с названиями колонок поставим цвет потемнее, а сновной текст в таблице сделаем светлее. Поменяем шрифт (<strong>font-family</strong>), размер (<strong>font-size</strong>)  и выравнивание (<strong>text-align</strong>) текста. Добавим расстояния между границами ячеек в таблице (<strong>border-spacing</strong>) и еще дополнительное расстояние в ячейках с основной информацией (<strong>padding</strong>). ","type":"p","className":""},{"data":"Правил стиля очень много в CSS: их можно посмотреть, например, <a href=\"http://htmlbook.ru/css\" data-type=\"usual\" target=\"_blank\">тут</a>. Или можно скопировать понравившееся правило стиля из кода уже готовой таблицы. Например, давайте скопируем из <a href=\"https://www.w3schools.com/html/tryit.asp?filename=tryhtml_table_intro\" data-type=\"usual\" target=\"_blank\">этой</a> таблицы правило, которое раскрашивает строки через одну. Вот такая у нас получилась таблица:","type":"p","className":""},{"data":{"id":2525,"data":{"images":[{"imagesList":[{"format":"webp","url_1x":"https://static.istories.media/uploaded/images/c619ec92074347a3b4777d278a3f5035-1200xautopx_1x.webp","url_2x":"https://static.istories.media/uploaded/images/c619ec92074347a3b4777d278a3f5035-1200xautopx_2x.webp","for_width":1200,"for_height":"auto","real_width_1x":1200,"real_width_2x":2400,"real_height_1x":548,"real_height_2x":1097},{"format":"png","url_1x":"https://static.istories.media/uploaded/images/c619ec92074347a3b4777d278a3f5035-1200xautopx_1x.png","url_2x":"https://static.istories.media/uploaded/images/c619ec92074347a3b4777d278a3f5035-1200xautopx_2x.png","for_width":1200,"for_height":"auto","real_width_1x":1200,"real_width_2x":2400,"real_height_1x":548,"real_height_2x":1097}]}]},"category":"image-embed"},"type":"image-embed"},{"data":"На следующем уроке мы научим нашего робота автоматически собирать спарсенные данные о госконтрактах в таблицу html.","type":"p","className":""}],"created_at_date":"2021-06-18","updated_at_date":null,"created_at_date_time":null,"updated_at_date_time":null,"is_exclusive":false,"is_urgent":false,"initially_published_at":"2021-06-18T08:20:21.507Z","has_additional_facts":false,"locale":"ru","has_visualization_without_fallback":false,"spec_project":null,"header_secondary":"","warning":"","is_translated_by_ai":false,"with_donation_banner":true,"donation_banner_header":"","donation_banner_text":"","media_outlet__codename":null,"with_authors_request_banner":false,"faq":[],"_path":"/workshops/2021/06/18/pishem-svoego-robota-na-python-urok-9/","is_published":true,"authors_list":[{"id":9,"lead":"Журналистка «Важных историй»","_path":"irina-dolinina","avatar":[{"format":"webp","url_1x":"https://static.istories.media/uploaded/images/1ce8f6c2725d44ee82748f09aa73e8a1-896x504px_1x.webp","url_2x":"https://static.istories.media/uploaded/images/1ce8f6c2725d44ee82748f09aa73e8a1-896x504px_2x.webp","crop_zone":null,"for_width":896,"for_height":504,"original_url":"https://static.istories.media/uploaded/images/1ce8f6c2725d44ee82748f09aa73e8a1-original.jpg","real_width_1x":896,"real_width_2x":1792,"real_height_1x":504,"real_height_2x":1008},{"format":"jpg","url_1x":"https://static.istories.media/uploaded/images/1ce8f6c2725d44ee82748f09aa73e8a1-896x504px_1x.jpg","url_2x":"https://static.istories.media/uploaded/images/1ce8f6c2725d44ee82748f09aa73e8a1-896x504px_2x.jpg","crop_zone":null,"for_width":896,"for_height":504,"original_url":"https://static.istories.media/uploaded/images/1ce8f6c2725d44ee82748f09aa73e8a1-original.jpg","real_width_1x":896,"real_width_2x":1792,"real_height_1x":504,"real_height_2x":1008},{"format":"webp","url_1x":"https://static.istories.media/uploaded/images/1ce8f6c2725d44ee82748f09aa73e8a1-688x387px_1x.webp","url_2x":"https://static.istories.media/uploaded/images/1ce8f6c2725d44ee82748f09aa73e8a1-688x387px_2x.webp","crop_zone":null,"for_width":688,"for_height":387,"original_url":"https://static.istories.media/uploaded/images/1ce8f6c2725d44ee82748f09aa73e8a1-original.jpg","real_width_1x":688,"real_width_2x":1376,"real_height_1x":387,"real_height_2x":774},{"format":"jpg","url_1x":"https://static.istories.media/uploaded/images/1ce8f6c2725d44ee82748f09aa73e8a1-688x387px_1x.jpg","url_2x":"https://static.istories.media/uploaded/images/1ce8f6c2725d44ee82748f09aa73e8a1-688x387px_2x.jpg","crop_zone":null,"for_width":688,"for_height":387,"original_url":"https://static.istories.media/uploaded/images/1ce8f6c2725d44ee82748f09aa73e8a1-original.jpg","real_width_1x":688,"real_width_2x":1376,"real_height_1x":387,"real_height_2x":774},{"format":"webp","url_1x":"https://static.istories.media/uploaded/images/1ce8f6c2725d44ee82748f09aa73e8a1-416x234px_1x.webp","url_2x":"https://static.istories.media/uploaded/images/1ce8f6c2725d44ee82748f09aa73e8a1-416x234px_2x.webp","crop_zone":null,"for_width":416,"for_height":234,"original_url":"https://static.istories.media/uploaded/images/1ce8f6c2725d44ee82748f09aa73e8a1-original.jpg","real_width_1x":416,"real_width_2x":832,"real_height_1x":234,"real_height_2x":468},{"format":"jpg","url_1x":"https://static.istories.media/uploaded/images/1ce8f6c2725d44ee82748f09aa73e8a1-416x234px_1x.jpg","url_2x":"https://static.istories.media/uploaded/images/1ce8f6c2725d44ee82748f09aa73e8a1-416x234px_2x.jpg","crop_zone":null,"for_width":416,"for_height":234,"original_url":"https://static.istories.media/uploaded/images/1ce8f6c2725d44ee82748f09aa73e8a1-original.jpg","real_width_1x":416,"real_width_2x":832,"real_height_1x":234,"real_height_2x":468},{"format":"webp","url_1x":"https://static.istories.media/uploaded/images/1ce8f6c2725d44ee82748f09aa73e8a1-336x189px_1x.webp","url_2x":"https://static.istories.media/uploaded/images/1ce8f6c2725d44ee82748f09aa73e8a1-336x189px_2x.webp","crop_zone":null,"for_width":336,"for_height":189,"original_url":"https://static.istories.media/uploaded/images/1ce8f6c2725d44ee82748f09aa73e8a1-original.jpg","real_width_1x":336,"real_width_2x":672,"real_height_1x":188,"real_height_2x":378},{"format":"jpg","url_1x":"https://static.istories.media/uploaded/images/1ce8f6c2725d44ee82748f09aa73e8a1-336x189px_1x.jpg","url_2x":"https://static.istories.media/uploaded/images/1ce8f6c2725d44ee82748f09aa73e8a1-336x189px_2x.jpg","crop_zone":null,"for_width":336,"for_height":189,"original_url":"https://static.istories.media/uploaded/images/1ce8f6c2725d44ee82748f09aa73e8a1-original.jpg","real_width_1x":336,"real_width_2x":672,"real_height_1x":188,"real_height_2x":378}],"lead_en":"IStories' investigative reporter","ordering":null,"position":"Авторка","is_public":true,"last_name":"Долинина","first_name":"Ирина","position_en":"Author","last_name_en":"Dolinina","first_name_en":"Irina"}],"external_authors_list":[],"editors_list":[],"external_editors_list":[],"participants_list":[],"external_participants_list":[],"partners_list":[],"case":null,"translated_material":null,"audio_material":null,"text_material":null,"id":280,"topics":[],"meta":{"og_title":"","og_description":"","twitter_title":"","twitter_description":"","og_image":"https://static.istories.media/uploaded/images/share/3cdbd96b3f494a9a8188edd3c71c1ce9.jpg","twitter_image":"https://static.istories.media/uploaded/images/share/3cdbd96b3f494a9a8188edd3c71c1ce9.jpg","vk_image":"https://static.istories.media/uploaded/images/share/vk/b7cdd5ba87514268a84df76287a063e5.jpg"},"tags":["ddj","css","html"],"playlist":null,"socialMediaBanners":[{"id":10,"text":"У пропаганды есть миллиарды из бюджета. У нас — только вы","link":"","codename":"donation"},{"id":14,"text":"Список погибших и пропавших без вести российских военных","link":"","codename":"haron"},{"id":18,"text":"","link":"","codename":"mobile_app"},{"id":6,"text":"Оставайтесь на связи: подпишитесь на нашу рассылку","link":"","codename":"newsletter"}]}},"staticQueryHashes":["764694655"],"slicesMap":{}}