Сделать исходный код. Как открыть исходный код страницы

Разработчики браузеров позаботились об удобстве тех, кто создает сайты, открываемые в этих самых браузерах, а именно – о вебмастерах. Они добавили в стандартные функции инструменты разработчика, с помощью которых можно легко открыть и посмотреть исходный код страницы сайта в браузере : HTML, CSS, JavaScript (JS), получить различные полезные данные о структуре сайта, провести его технический анализ. В общем, увидеть много полезного.

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

Из этой стать вы узнаете, как в браузере посмотреть исходный код страницы сайта (как открыть HTML, CSS, JavaScript код сайта).

Как открыть исходный код страницы в браузере

Открыть исходный код веб страницы в браузере можно двумя способами:

С помощью горячих клавиш;
Открыть из контекстного меню.

Ctrl + U – комбинация горячих клавиш для просмотра исходного кода всей страницы сайта в отдельном новом окне. Стандартные для всех браузеров: Google Chrome, Opera, Mozilla Firefox, Яндекс браузера, IE.

Также в инструменты разработчика можно войти следующим образом:

Для того чтобы быстро найти нужный код, слово или текст на странице можно использовать стандартное для всех браузеров сочетание горячих клавиш поиска: Ctrl + G.

Видео-инструкция:

Просмотр кода элемента | исследовать элемент | проинспектировать элемент

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

Как просмотреть код элемента на странице:

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

Горячие клавиши (кнопки):

Google Chrome: Ctrl+Shift+I и Ctrl+Shift+C

Opera: Ctrl+Shift+I и Ctrl+Shift+C

Mozilla Firefox: Ctrl+Shift+I и Ctrl+Shift+C

Яндекс браузер: Ctrl+Shift+I и Ctrl+Shift+C

После проделанных действий, в этом же окне браузера откроется исходный код web страницы:

Весь HTML код будет в левой большой колонке. А CSS стили – в правой.

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

В этой видео-инструкции подробно рассказано и показано, как работать с инструментами разработчика:

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

Кстати, неопытных интернет-пользователей, изменивших код страницы и ждущих, что он сохранится, ждет разочарование. Ведь после обновления страницы, все изменения на ней пропадут. Этого мало, чтобы взломать сайт 🙂

Как посмотреть исходный код на телефоне Android

Еще хотелось бы заметить, что инструменты разработчика доступны не только в десктопной версии браузеров, то есть, на компьютерах и ноутбуках. На телефонах и планшетах (Android, IOS) можно также посмотреть исходный код.

Для этого следует добавить к URL инспектируемой страницы приставку view-source:

Например:

view-source:https://сайт/turbo-rezhim-opera/

Ctrl + U

Как посмотреть исходный код элемента?

Нажмите правую кнопку мыши на интересующем элементе страницы.

Google Chrome : “Просмотр кода элемента”

Opera : “Проинспектировать элемент”

FireFox : “Анализировать элемент”

В других браузерах ищите подобный по смыслу пункт меню.

Всем привет!

Специально вначале статьи выложил всю суть, для тех, кто ищет быстрый ответ.

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

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

Давайте посмотрим на конкретном примере как можно использовать просмотр исходного кода страницы.

Например, мы хотим посмотреть какие ключевые слова (keywords) используются для конкретной страницы. Заходим на интересующую нас веб-страницу и нажимаем Ctrl+U . В отдельном окне или в отдельной закладке откроется исходный код данной страницы. Нажимаем Ctrl+F для поиска фрагмента кода. В данном случае печатаем в окне поиска слово “keywords”. Вас автоматически перебросит на фрагмент кода с этим мета-тегом и выделит искомое слово.

По аналогии можно искать и изучать другие фрагменты кода.

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

Давайте применим на конкретном примере просмотр кода элемента. Например, посмотрим есть ли у ссылки атрибут nofollow . Нажимаем правой кнопкой мыши на интересующей нас ссылке и в выпадающем контекстном меню левой кнопкой кликаем по пункту “Просмотр кода элемента” или подобному (в зависимости от вашего браузера). Внизу, в специальном окне для анализа кода, получаем нечто подобное.

Мы видим, что в коде ссылки присутствует rel=”nofollow” . Это значит, что по этой ссылке не будет “утекать” и PR. Об этом подробней поговорим в следующих статьях. Сейчас же важно то, что вы теперь знаете как посмотреть исходный код страницы и исходный код отдельного элемента.

Долгое время для меня опция «показать исходный код страницы» была бесполезна и неинтересна. Пока изучение HTML на Codecademy и верстках собственных сайтов не переросло в мое новое увлечение. Тут и возник вопрос: где найти реальные кейсы и позаимствовать интересные решения для своей «копилки»? Ответ был неожиданно прост, как все гениальное: посмотреть исходный код страницы в Google Chrome! Делюсь с вами своими скромными находками.

Что такое исходный код страницы

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

Исходный код, он же HTML код страницы – текст на языке Hyper Text Markup Language (HTML). Он включает в себя собственно контент страницы (текст, таблицы) и тэги. Последние играют роль инструкции для браузера: как отображать контент, какой вид форматирования использовать, куда вставить гиперссылку или медиафайл. Ну а для нас, начинающих программистов исходный код – лучший полигон для обучения: находим интересный сайт и подсматриваем, сохраняем, используем удачные фрагменты. Как?

Как посмотреть исходный код в странице браузера Google Chrome

Находим понравившуюся страницу. Например, меня заинтересовало оформление меню сайта. Открыть исходный код в браузере Google Chrome можно тремя способами:

Щелкаем по иконке меню в правом верхнем углу браузера и выбираем пункт «Дополнительные инструменты». Среди прочих есть опция «Посмотреть исходный код». Признаться, редко использую данный способ: много лишних движений. Можно сделать еще проще.
Нажимаем комбинацию клавиш Ctrl+U – открывается новое окно с исходным кодом;
Для фанатов контекстного меню: щелчок правой кнопкой мыши по странице и выбираем опцию «Просмотр кода страницы».

С задачей посмотреть HTML код страницы в браузере справились. Переходим к самому интересному этапу.

Как отредактировать и сохранить исходный код

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

Вариант 1. «Вручную»

После того, как мы открыли исходный код страницы, вызываем контекстное меню и выбираем опцию «Сохранить как» и сохраняем файл на жесткий диск. Редактируем файл в блокноте или Notepad, сохраняем изменения и открываем через браузер. Результаты наших изменений (удачные и не очень) отразятся в окне браузера.

Вариант 2. Для профи

Когда «играешь» с исходным кодом каждый день, процесс «сохранить – открыть – изменить – сохранить – проверить» утомляет. Для себя я нашла решение в виде установки плагина для Google Chrome – Firebug Lite . Он позволяет отредактировать и сохранить исходный код, не покидая окно браузера.

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

Пример 4.1. Исходный код веб-страницы

Пример веб-страницы

Заголовок

Первый абзац.

Второй абзац.

Скопируйте содержимое данного примера и сохраните его в папке c:\www\ под именем example41.html. После этого запустите браузер и откройте файл через пункт меню Файл > Открыть файл (Ctrl+O) . В диалоговом окне выбора документа укажите файл example41.html. В браузере откроется веб-страница, показанная на рис. 4.1.

Рис. 4.1. Результат выполнения примера

Элемент предназначен для указания типа текущего документа - DTD (document type definition, описание типа документа). Это необходимо, чтобы браузер понимал, как следует интерпретировать текущую веб-страницу, ведь HTML существует в нескольких версиях, кроме того, имеется XHTML (EXtensible HyperText Markup Language, расширенный язык разметки гипертекста), похожий на HTML, но различающийся с ним по синтаксису. Чтобы браузер «не путался» и понимал, согласно какому стандарту отображать веб-страницу и необходимо в первой строке кода задавать .

Существует несколько видов , они различаются в зависимости от версии HTML, на которую ориентированы. В табл. 4.1. приведены основные типы документов с их описанием.

Табл. 4.1. Допустимые DTD

DOCTYPE	Описание
HTML 4.01
	Строгий синтаксис HTML.
	Переходный синтаксис HTML.
	В HTML-документе применяются фреймы.
HTML 5
	В этой версии HTML только один доктайп.
XHTML 1.0
	Строгий синтаксис XHTML.
	Переходный синтаксис XHTML.
	Документ написан на XHTML и содержит фреймы.
XHTML 1.1
	Разработчики XHTML 1.1 предполагают, что он постепенно вытеснит HTML. Как видите, никакого деления на виды это определение не имеет, поскольку синтаксис один и подчиняется четким правилам.

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

Например, в строгом HTML и XHTML непременно требуется наличие тега , а в переходном HTML его можно опустить и не указывать. При этом помним, что браузер в любом случае покажет документ, независимо от того, соответствует он синтаксису или нет. Подобная проверка осуществляется при помощи валидатора и предназначена в первую очередь для разработчиков, чтобы отслеживать ошибки в документе.</p> <p>В дальнейшем будем применять преимущественно строгий <!DOCTYPE> , кроме случаев, когда это оговаривается особо. Это позволит нам избегать типичных ошибок и приучит к написанию синтаксически правильного кода.</p> <p>Часто можно встретить код HTML вообще без использования <!DOCTYPE> , веб-страница в подобном случае все равно будет показана. Тем не менее, может получиться, что один и тот же документ отображается в браузере по-разному при использовании <!DOCTYPE> и без него. Кроме того, браузеры могут по-своему показывать такие документы, в итоге страница «рассыплется», т.е. будет отображаться совсем не так, как это требуется разработчику. Чтобы не произошло подобных ситуаций, всегда добавляйте <!DOCTYPE> в начало документа.</p><p>Тег <html> определяет начало HTML-файла, внутри него хранится заголовок (<head> ) и тело документа (<body> ).</p><p>Заголовок документа, как еще называют блок <head> , может содержать текст и теги, но содержимое этого раздела не показывается напрямую на странице, за исключением контейнера <title> .</p><p> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> </p><p>Тег <meta> является универсальным и добавляет целый класс возможностей, в частности, с помощью метатегов, как обобщенно называют этот тег, можно изменять кодировку страницы, добавлять ключевые слова, описание документа и многое другое. Чтобы браузер понимал, что имеет дело с кодировкой UTF-8 (Unicode transformation format, формат преобразования Юникод) и добавляется данная строка.</p><p> <title>Пример веб-страницы

Тег определяет заголовок веб-страницы, это один из важных элементов предназначенный для решения множества задач. В операционной системе Windows текст заголовка отображается в левом верхнем углу окна браузера (рис. 4.2).</p> <p><img src='https://i0.wp.com/htmlbook.ru/files/images/samhtml/fig_1_04_02.png' height="37" width="194" loading=lazy></p> <p>Рис. 4.2. Вид заголовка в браузере</p> <p>Тег <title> является обязательным и должен непременно присутствовать в коде документа.</p><p>Обязательно следует добавлять закрывающий тег </head> , чтобы показать, что блок заголовка документа завершен.</p><p>Тело документа <body> предназначено для размещения тегов и содержательной части веб-страницы.</p><p> <h1>Заголовок</h1> </p><p>HTML предлагает шесть текстовых заголовков разного уровня, которые показывают относительную важность секции, расположенной после заголовка. Так, тег <h1> представляет собой наиболее важный заголовок первого уровня, а тег <h6> служит для обозначения заголовка шестого уровня и является наименее значительным. По умолчанию, заголовок первого уровня отображается самым крупным шрифтом жирного начертания, заголовки последующего уровня по размеру меньше. Теги <h1>...<h6> относятся к блочным элементам, они всегда начинаются с новой строки, а после них другие элементы отображаются на следующей строке. Кроме того, перед заголовком и после него добавляется пустое пространство.</p><p>  </p><p>Некоторый текст можно спрятать от показа в браузере, сделав его комментарием. Хотя такой текст пользователь не увидит, он все равно будет передаваться в документе, так что, посмотрев исходный код, можно обнаружить скрытые заметки.</p> <p>Мы выпустили новую книгу «Контент-маркетинг в социальных сетях: Как засесть в голову подписчиков и влюбить их в свой бренд».</p> <p><img src='https://i0.wp.com/semantica.in/wp-content/uploads/2017/11/code-3.png' align="center" width="100%" loading=lazy></p> <p>Исходный код сайта – это совокупность HTML-разметки, CSS стилей и скриптов JavaScript, которые браузер получает от веб-сервера.</p> <p><span class="YLlDA5uz9EU"></span></p> <p><b>Больше видео на нашем канале - изучайте интернет-маркетинг с SEMANTICA </b></p> <p><img src='https://i1.wp.com/semantica.in/wp-content/uploads/2017/12/yutub.png' height="37" width="178" loading=lazy></p> <p>Его можно сравнить с набором команд, которые дает солдатам командир. Представьте, что зрители не видят и не слышат начальника. С их точки зрения военные самостоятельно выполняют действия. В нашем случае командир – это браузер, команды – это исходный код, а марширующие солдаты – это конечный результат.</p> <p>Хранится сайт на веб-сервере, который отправляет страницу по запросу пользователя. Запрос – это ввод URL в строке адреса, щелчок по ссылке или нажатие на кнопку отправки данных в форме. Не важно, на каком языке написаны веб-страницы, включают ли они программную часть. Конечным результатом работы любого серверного алгоритма является набор html-тегов и текста.<br> Исходный код страницы – это набор данных, включающий в себя:</p> <ul><li>html-разметку;</li> <li>стилевую таблицу или ссылку на файл ;</li> <li>программы, написанные на JavaScript или ссылки на файлы с кодом.</li> </ul><p>Эти три раздела обрабатываются браузером. Для сервера это просто текст, который необходимо отправить в ответ на запрос.</p> <h2>Зачем нам может понадобиться изучать исходный код</h2> <p>Все, что мы увидим, мы сможем проанализировать и применить для решения тех или иных задач, которые возникают в ходе работы с сайтом, особенно при его оптимизации. Просмотрев исходный код, мы можем:</p> <ul><li>Увидеть мета-теги своего или чужого сайта для их анализа.</li> <li>Увидеть наличие или отсутствие некоторых элементов на сайте: счетчиков, кодов идентификации в различных системах, определенных скриптов и прочего.</li> <li>Узнать параметры элементов: размеры, цвета, шрифты.</li> <li>Найти путь к фотографиям и другим элементам, располагающимся на странице.</li> <li>Изучить ссылки со страницы.</li> <li>Найти проблемы с кодом, мешающие в процессе оптимизации сайта: невынесенные в отдельные файлы стили, скрипты, невалидный код.</li> </ul><p>Это основные возможности, но на самом деле, умея читать код, вы сможете узнать о странице намного больше.</p> <h2>Как посмотреть исходный код сайта</h2> <p>Полностью в том виде, в каком он выложен на сервере, из браузера это сделать не удастся. А вот увидеть всю разметку можно, нажав на странице правую кнопку мыши. Здесь и далее на примере Google Chrome.</p> <p><img src='https://i0.wp.com/semantica.in/wp-content/uploads/2018/02/09ffa0c60f.png' align="center" width="100%" loading=lazy></p> <p>Выбираем опцию «Просмотр кода страницы» и получаем полный листинг в отдельной вкладке.</p> <p><img src='https://i0.wp.com/semantica.in/wp-content/uploads/2018/02/11e92d1f09.png' align="center" width="100%" loading=lazy></p> <p>Это просто текст, который придется анализировать, чтобы понять. А вот получить интерактивный код можно с помощью инструментов разработчика.</p> <h2>Как найти исходный код страницы сайта</h2> <p>Нажимаем на значок меню в браузере. Чаще всего он находится справа и имеет вид трех точек или полосок.</p> <p><img src='https://i0.wp.com/semantica.in/wp-content/uploads/2018/02/712414eef9.png' align="center" width="100%" loading=lazy></p> <p>В разделе дополнительных инструментов выбираем «Инструменты разработчика».</p> <p><img src='https://i1.wp.com/semantica.in/wp-content/uploads/2018/02/48cb60e66c.png' align="center" width="100%" loading=lazy></p> <p>Откроется окно, в котором отображается активное состояние кода. Это значит, что при щелчке мыши на разметке рядом отобразится стиль элемента, а на странице будут подсвечиваться выбранные блоки.</p> <p><img src='https://i0.wp.com/semantica.in/wp-content/uploads/2018/02/b5c5367f08.png' align="center" width="100%" loading=lazy></p> <p>Во вкладке «Source» можно просмотреть содержимое некоторых файлов: скрипты, шрифты, изображения.</p> <p><img src='https://i1.wp.com/semantica.in/wp-content/uploads/2018/02/8fb9f8a3b8.png' align="center" width="100%" loading=lazy></p> <p><img src='https://i1.wp.com/semantica.in/wp-content/uploads/2018/02/3bab1ab266.png' align="center" width="100%" loading=lazy></p> <p>Во вкладке «Security» доступна проверка сертификата сайта.</p> <p><img src='https://i1.wp.com/semantica.in/wp-content/uploads/2018/02/6d29a11c3b.png' align="center" width="100%" loading=lazy></p> <p>Вкладка «Audits» поможет провести проверку выложенного на хостинг ресурса.</p> <p><img src='https://i1.wp.com/semantica.in/wp-content/uploads/2018/02/1330f57b87.png' align="center" width="100%" loading=lazy></p> <p>Если расположение панели справа неудобно, можно нажать три точки и поменять его, выбрав желаемый пункт.</p> <p><img src='https://i1.wp.com/semantica.in/wp-content/uploads/2018/02/7a0e8305f4.png' align="center" width="100%" loading=lazy></p> <h2>Как посмотреть мета-теги</h2> <p>Каждый html-документ включает в себя теги структуры. Вот некоторые из них:</p> <ol><li>Html – весь документ.</li> <li><span>Head – раздел служебных заголовков. </span></li> <li><span>Title – заголовок страницы (отображается на вкладке). </span></li> <li><span>Body – тело документа. </span></li> <li><span>H1-H6 – заголовки текста страницы. </span></li> <li>Article – статья. </li> <li>Section – раздел. </li> <li>Menu – меню. </li> <li>Div – блок. </li> <li>Span – строка. </li> <li>P – абзац. </li> <li>Table – таблица. </li> </ol><p>Элементы предназначены для логического разграничения разделов на странице, при необходимости они оформляются с помощью стилей. В них размещается текст, который так или иначе виден на странице. Но в теге Head присутствует служебная информация. Для ее указания служат мета-теги. Все что в них записано, предназначено для сервера и поисковых систем.</p> <p><img src='https://i2.wp.com/semantica.in/wp-content/uploads/2018/02/b34bb79f96.png' align="center" width="100%" loading=lazy></p> <p>Их содержимое другим способом узнать невозможно.</p> <p>Обратим внимание на тег Link. С его помощью указываются ссылки на внешние подключаемые файлы. При желании можно увидеть содержимое и сохранить на диск. Для этого наведите указатель на адрес и нажмите ПКМ. Выберите пункт «Open in new Tab».</p> <p><img src='https://i1.wp.com/semantica.in/wp-content/uploads/2018/02/1685995ee1.png' align="center" width="100%" loading=lazy></p> <p>В новой вкладке откроется указанный файл, который можно просмотреть или сохранить.</p> <h2>Как посмотреть исходный код страницы для отладки скрипта</h2> <p>В этом случае удобнее всего открывать страницу на локальной машине. Если необходимо только исправить разметку, стили и скрипты, то это можно делать прямо из папки. Html-код просматривается таким же образом. А вот ошибки кода JavaScript можно увидеть во вкладке «Console». Здесь показывает описание ошибки и номер строки, в которой она возникла.</p> <p><img src='https://i2.wp.com/semantica.in/wp-content/uploads/2018/02/990abb1c76.png' align="center" width="100%" loading=lazy></p> <p>Синтаксическую можно увидеть непосредственно в коде. Для этого предназначена вкладка «Source».</p> <p><img src='https://i1.wp.com/semantica.in/wp-content/uploads/2018/02/0961303a76.png' align="center" width="100%" loading=lazy></p> <h2>Как посмотреть код конкретного элемента</h2> <p>Для больших страниц с большим количеством элементов сложно найти нужный код во всей разметке. В таком случае следует воспользоваться специальной командой контекстного меню. Наведем мышь на фрагмент и нажмем ПКМ. Выберем команду «Просмотреть код».</p> <p><img src='https://i0.wp.com/semantica.in/wp-content/uploads/2018/02/296c218cf5.png' align="center" width="100%" loading=lazy></p> <p>Откроется то же окно, но с фокусировкой на выбранном объекте.</p> <p><img src='https://i1.wp.com/semantica.in/wp-content/uploads/2018/02/2eb093fc23.png' align="center" width="100%" loading=lazy></p> <h2>Резюме</h2> <p>Мы рассказали, что такое исходный код страницы. Достаточно освоить элементарные знания HTML и CSS, и пользуясь удобными инструментами разработчика, вы сможете проводить отладку своих собственных html-документов.</p> <p>Просмотр кода ресурсов в интернете позволит вам учиться не только на собственном опыте, но и использовать реальные рабочие примеры. А для seo-специалистов будут полезны мета-теги, информация в которых может сказать о сайте многое.</p> <script>document.write("<img style='display:none;' src='//counter.yadro.ru/hit;artfast_after?t44.1;r"+ escape(document.referrer)+((typeof(screen)=="undefined")?"": ";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth? screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+";h"+escape(document.title.substring(0,150))+ ";"+Math.random()+ "border='0' width='1' height='1' loading=lazy>");</script> </div> <div class="clear"></div> </div> <script type="text/javascript" src="//yastatic.net/share/share.js" charset="utf-8"></script><div class="yashare-auto-init" data-yashareL10n="ru" data-yashareType="button" data-yashareQuickServices="vkontakte,odnoklassniki,facebook,twitter,moimir,lj,moikrug,gplus"></div> </noindex> </div> </article> <div class="clear"></div> <h4 class="heading"> <i class="fa fa-hand-o-right"></i>Читайте также:</h4> <ul class="related-posts group"> <li class="related post-hover"> <article class="post-3487 post type-post status-publish format-standard has-post-thumbnail hentry category-steny"> <div class="post-thumbnail"> <a href="/preobrazovanie-12-volt-v-220/" title="Преобразование 12 вольт в 220"> <img width="520" height="245" src="/uploads/2e7ad8527c4bdcd2368e1534de3455f5.jpg" class="attachment-thumb-medium size-thumb-medium wp-post-image" alt="Преобразование 12 вольт в 220" sizes="(max-width: 520px) 100vw, 520px" / loading=lazy> </a> <a class="post-comments" href="/preobrazovanie-12-volt-v-220/"><span><i class="fa fa-comments-o"></i>0</span></a> </div> <div class="related-inner"> <h4 class="post-title"> <a href="/preobrazovanie-12-volt-v-220/" rel="bookmark" title="Преобразование 12 вольт в 220">Преобразование 12 вольт в 220</a> </h4> <div class="post-meta group"> <p class="post-date">2024-05-19 17:54:57</p> </div> </div> </article> </li> <li class="related post-hover"> <article class="post-3486 post type-post status-publish format-standard has-post-thumbnail hentry category-steny"> <div class="post-thumbnail"> <a href="/pribor-izmeryayushchii-chastotu-kolebanii-princip-raboty-elektronnogo/" title="Принцип работы электронного частотомера при измерении частоты"> <img width="520" height="245" src="/uploads/7f2218e8450b7998ddf84529dfe047b1.jpg" class="attachment-thumb-medium size-thumb-medium wp-post-image" alt="Принцип работы электронного частотомера при измерении частоты" sizes="(max-width: 520px) 100vw, 520px" / loading=lazy> </a> <a class="post-comments" href="/pribor-izmeryayushchii-chastotu-kolebanii-princip-raboty-elektronnogo/"><span><i class="fa fa-comments-o"></i>0</span></a> </div> <div class="related-inner"> <h4 class="post-title"> <a href="/pribor-izmeryayushchii-chastotu-kolebanii-princip-raboty-elektronnogo/" rel="bookmark" title="Принцип работы электронного частотомера при измерении частоты">Принцип работы электронного частотомера при измерении частоты</a> </h4> <div class="post-meta group"> <p class="post-date">2024-05-19 17:54:57</p> </div> </div> </article> </li> <li class="related post-hover"> <article class="post-3483 post type-post status-publish format-standard has-post-thumbnail hentry category-steny"> <div class="post-thumbnail"> <a href="/kompyuter-stal-perezagruzhatsya-sam-po-sebe-kompyuter-sam/" title="Компьютер сам перезагружается"> <img width="520" height="245" src="/uploads/b99e811267b2f524e8d2b01f97215ff2.jpg" class="attachment-thumb-medium size-thumb-medium wp-post-image" alt="Компьютер сам перезагружается" sizes="(max-width: 520px) 100vw, 520px" / loading=lazy> </a> <a class="post-comments" href="/kompyuter-stal-perezagruzhatsya-sam-po-sebe-kompyuter-sam/"><span><i class="fa fa-comments-o"></i>0</span></a> </div> <div class="related-inner"> <h4 class="post-title"> <a href="/kompyuter-stal-perezagruzhatsya-sam-po-sebe-kompyuter-sam/" rel="bookmark" title="Компьютер сам перезагружается">Компьютер сам перезагружается</a> </h4> <div class="post-meta group"> <p class="post-date">2024-05-18 18:37:18</p> </div> </div> </article> </li> </ul> </div> </section> <div class="sidebar s1"> <a class="sidebar-toggle" title="Развернуть боковое меню"><i class="fa icon-sidebar-toggle"></i></a> <div class="sidebar-content"> <div class="sidebar-top group"> <p>Категории:</p> </div> <div id="categories-5" class="widget widget_categories"><h3> </h3> <ul> <li class="cat-item cat-item-16"><a href="/category/android/">Android</a> </li> <li class="cat-item cat-item-16"><a href="/category/linux/">Linux</a> </li> <li class="cat-item cat-item-16"><a href="/category/windows/">Windows</a> </li> <li class="cat-item cat-item-16"><a href="/category/security/">Безопасность</a> </li> <li class="cat-item cat-item-16"><a href="/category/browsers/">Браузеры</a> </li> <li class="cat-item cat-item-16"><a href="/category/web-services/">Веб-сервисы</a> </li> <li class="cat-item cat-item-16"><a href="/category/iron/">Железо</a> </li> <li class="cat-item cat-item-16"><a href="/category/internet/">Интернет</a> </li> <li class="cat-item cat-item-16"><a href="/category/keyboard/">Клавиатура</a> </li> <li class="cat-item cat-item-16"><a href="/category/content/">Контент</a> </li> <li class="cat-item cat-item-16"><a href="/category/creative/">Креатив</a> </li> <li class="cat-item cat-item-16"><a href="/category/mobile/">Мобильное</a> </li> <li class="cat-item cat-item-16"><a href="/category/os-setup/">Настройка ОС</a> </li> <li class="cat-item cat-item-16"><a href="/category/it-answers/">Ответы IT</a> </li> <li class="cat-item cat-item-16"><a href="/category/programs/">Программы</a> </li> <li class="cat-item cat-item-16"><a href="/category/hostings-and-domains/">Хостинги и домены</a> </li> </ul> </div> <div id="recent-posts-8" class="widget widget_recent_entries"> <h3>Свежие записи</h3> <ul> <li> <a href="/kak-udalit-skaip-akkaunt-esli-net-zhelaniya-im-polzovatsya-kak/">Как полностью удалить аккаунт скайп Удалить аккаунт скайп полностью</a> </li> <li> <a href="/kak-ochistit-kesh-igry-world-of-tanks-proverka-i-chistka-kesha-igr-v/">Проверка и чистка кэша игр в Steam Как почистить кэш в вот</a> </li> <li> <a href="/rsya-yandeks-direkt-chto-eto-takoe-i-kak-uluchshit-otdachu-otlichiya-rsya/">Отличия РСЯ и поиска: самое важное Поисковый директ рся что значит</a> </li> <li> <a href="/naushniki-s-sinhronnym-perevodom-novyi-proekt-google-naushniki-so/">Новый проект Google — наушники со встроенным переводчиком</a> </li> <li> <a href="/dr-web-katana-programma-dlya-zashchity-vashego-pk-dr-web-katana-produkt-novogo/">Dr Web Katana: программа для защиты Вашего ПК</a> </li> <li> <a href="/kak-nastroit-programmu-rd-client-pristupaem-k-rabote-s-microsoft-remote/">Приступаем к работе с Microsoft Remote Desktop для Андроида</a> </li> <li> <a href="/kak-zaregistrirovat-fail-dll-ocx-kak-ustanovit-dll-faily-na-windows-kak/">Как установить DLL файлы на Windows?</a> </li> <li> <a href="/posle-obnovleniya-vindovs-10-noutbuk-dolgo-zagruzhaetsya/">Компьютер долго загружается при включении: Решаем проблему</a> </li> </ul> </div> </div> </div> <div class="sidebar s2"> <a class="sidebar-toggle" title="Развернуть боковое меню"><i class="fa icon-sidebar-toggle"></i></a> <div class="sidebar-content"> <div class="sidebar-top group"> <p>Популярное:</p> </div> <div id="search-4" class="widget widget_search"><form method="get" class="searchform themeform" action="/"> <div> <input type="text" class="search" name="s" onblur="if(this.value=='')this.value='Укажите что ищете и нажмите Enter';" onfocus="if(this.value=='Укажите что ищете и нажмите Enter')this.value='';" value="Укажите что ищете и нажмите Enter" /> </div> </form></div><div id="alxposts-4" class="widget widget_alx_posts"> <h3> </h3> <ul class="alx-posts group thumbs-enabled"> <li> <div class="post-item-thumbnail"> <a href="/v-yutube-vylezaet-reklama-kak-otklyuchit-reklamu-na-yutube-raz-i/" title="Как отключить рекламу на «Ютубе» раз и навсегда"> <img width="520" height="245" src="/uploads/d5cd0dc20f6ac80df44a3130890f9e35.jpg" class="attachment-thumb-medium size-thumb-medium wp-post-image" alt="Как отключить рекламу на «Ютубе» раз и навсегда" sizes="(max-width: 520px) 100vw, 520px" / loading=lazy> </a> </div> <div class="post-item-inner group"> <p class="post-item-title"><a href="/v-yutube-vylezaet-reklama-kak-otklyuchit-reklamu-na-yutube-raz-i/" rel="bookmark" title="Как отключить рекламу на «Ютубе» раз и навсегда">Как отключить рекламу на «Ютубе» раз и навсегда</a></p> <p class="post-item-date">2024-05-14 17:36:23</p> </div> </li> <li> <div class="post-item-thumbnail"> <a href="/analogi-programmy-upravleniya-prodazhami-na-predpriyatii-programma-dlya/" title="Программа для управления продажами"> <img width="520" height="245" src="/uploads/391e04d400d3c8f4dced9941a0b1df3c.jpg" class="attachment-thumb-medium size-thumb-medium wp-post-image" alt="Программа для управления продажами" sizes="(max-width: 520px) 100vw, 520px" / loading=lazy> </a> </div> <div class="post-item-inner group"> <p class="post-item-title"><a href="/analogi-programmy-upravleniya-prodazhami-na-predpriyatii-programma-dlya/" rel="bookmark" title="Программа для управления продажами">Программа для управления продажами</a></p> <p class="post-item-date">2024-05-13 17:52:56</p> </div> </li> <li> <div class="post-item-thumbnail"> <a href="/rabota-s-edinicami-izmereniya-i-upakovkoi-v-1s-roznice/" title="Программа Мой склад — что это?"> <img width="520" height="245" src="/uploads/9411a5ef089a0723e297253a4e31bd0e.jpg" class="attachment-thumb-medium size-thumb-medium wp-post-image" alt="Программа Мой склад — что это?" sizes="(max-width: 520px) 100vw, 520px" / loading=lazy> </a> </div> <div class="post-item-inner group"> <p class="post-item-title"><a href="/rabota-s-edinicami-izmereniya-i-upakovkoi-v-1s-roznice/" rel="bookmark" title="Программа Мой склад — что это?">Программа Мой склад — что это?</a></p> <p class="post-item-date">2024-05-13 17:52:56</p> </div> </li> <li> <div class="post-item-thumbnail"> <a href="/avtomatizaciya-torgovli-onlain-servis-moi-sklad-moisklad-professionalnyi/" title="Мойсклад профессиональный аккаунт есть бесплатный тариф актуальная информация Лучше внешний код не изменять"> <img width="520" height="245" src="/images/2013-08-28_19-00-09-520x333ub-520x245.png" class="attachment-thumb-medium size-thumb-medium wp-post-image" alt="Мойсклад профессиональный аккаунт есть бесплатный тариф актуальная информация Лучше внешний код не изменять" sizes="(max-width: 520px) 100vw, 520px" / loading=lazy> </a> </div> <div class="post-item-inner group"> <p class="post-item-title"><a href="/avtomatizaciya-torgovli-onlain-servis-moi-sklad-moisklad-professionalnyi/" rel="bookmark" title="Мойсклад профессиональный аккаунт есть бесплатный тариф актуальная информация Лучше внешний код не изменять">Мойсклад профессиональный аккаунт есть бесплатный тариф актуальная информация Лучше внешний код не изменять</a></p> <p class="post-item-date">2024-05-13 17:52:56</p> </div> </li> <li> <div class="post-item-thumbnail"> <a href="/gulliver-mod-na-umenshenie-i-uvelichenie-sebya-gulliver-mod-na/" title="Gulliver — мод на уменьшение и увеличение себя Мод на становится детьми 1 8"> <img width="520" height="245" src="/uploads/c45d8d3c16e01bb73f5f4de39349b364.jpg" class="attachment-thumb-medium size-thumb-medium wp-post-image" alt="Gulliver — мод на уменьшение и увеличение себя Мод на становится детьми 1 8" sizes="(max-width: 520px) 100vw, 520px" / loading=lazy> </a> </div> <div class="post-item-inner group"> <p class="post-item-title"><a href="/gulliver-mod-na-umenshenie-i-uvelichenie-sebya-gulliver-mod-na/" rel="bookmark" title="Gulliver — мод на уменьшение и увеличение себя Мод на становится детьми 1 8">Gulliver — мод на уменьшение и увеличение себя Мод на становится детьми 1 8</a></p> <p class="post-item-date">2024-05-12 17:36:50</p> </div> </li> <li> <div class="post-item-thumbnail"> <a href="/lichnyi-kabinet-onlime-registraciya-vhod-i-osnovnye-uslugi-lichnyi/" title="Личный кабинет Onlime: регистрация, вход и основные услуги"> <img width="520" height="245" src="/uploads/d74801a25136dd04e90f8f2801af9a22.jpg" class="attachment-thumb-medium size-thumb-medium wp-post-image" alt="Личный кабинет Onlime: регистрация, вход и основные услуги" sizes="(max-width: 520px) 100vw, 520px" / loading=lazy> </a> </div> <div class="post-item-inner group"> <p class="post-item-title"><a href="/lichnyi-kabinet-onlime-registraciya-vhod-i-osnovnye-uslugi-lichnyi/" rel="bookmark" title="Личный кабинет Onlime: регистрация, вход и основные услуги">Личный кабинет Onlime: регистрация, вход и основные услуги</a></p> <p class="post-item-date">2024-05-11 17:52:01</p> </div> </li> <li> <div class="post-item-thumbnail"> <a href="/onlaim---otzyvy/" title="Онлайм - отзывы"> <img width="520" height="245" src="/uploads/fa070c82ea2218712c67f3b63578a62b.jpg" class="attachment-thumb-medium size-thumb-medium wp-post-image" alt="Онлайм - отзывы" sizes="(max-width: 520px) 100vw, 520px" / loading=lazy> </a> </div> <div class="post-item-inner group"> <p class="post-item-title"><a href="/onlaim---otzyvy/" rel="bookmark" title="Онлайм - отзывы">Онлайм - отзывы</a></p> <p class="post-item-date">2024-05-11 17:52:01</p> </div> </li> <li> <div class="post-item-thumbnail"> <a href="/prilozhenie-rostelekom-dlya-televizora-lg-kak-ustanovit-interaktivnoe/" title="Как установить интерактивное телевидение ростелеком"> <img width="520" height="245" src="/uploads/8960c87bc5a007210d8b13c8a4dd38c8.jpg" class="attachment-thumb-medium size-thumb-medium wp-post-image" alt="Как установить интерактивное телевидение ростелеком" sizes="(max-width: 520px) 100vw, 520px" / loading=lazy> </a> </div> <div class="post-item-inner group"> <p class="post-item-title"><a href="/prilozhenie-rostelekom-dlya-televizora-lg-kak-ustanovit-interaktivnoe/" rel="bookmark" title="Как установить интерактивное телевидение ростелеком">Как установить интерактивное телевидение ростелеком</a></p> <p class="post-item-date">2024-05-11 17:52:01</p> </div> </li> </ul> </div> </div> </div> </div> </div> </div> </div> <div class="clear"></div> <footer id="footer"> <section class="container" id="footer-bottom"> <div class="container-inner"> <a id="back-to-top" href="#"><i class="fa fa-angle-up"></i></a> <div class="pad group"> <div class="grid one-half"> <div id="copyright"> <p> © 2024. Все права защищены. <a href="/sitemap.xml">Карта сайта</a></p> </div> <div id="credit"> <noindex> </noindex> </div> </div> <div class="grid one-half last"> </div> </div> </div> </section> </footer> </div> <script> var $nocnflct = jQuery.noConflict(); $nocnflct(function () { $nocnflct.scrollUp({ scrollName: 'scrollUp', // Element ID scrollClass: 'scrollUp scrollup-image scrollup-right', // Element Class scrollDistance: 300, // Distance from top/bottom before showing element (px) scrollFrom: 'top', // top or bottom scrollSpeed: 300, // Speed back to top (ms ) easingType: 'linear', // Scroll to top easing (see http://easings.net/) animation: 'fade', // Fade, slide, none animationInSpeed: 200, // Animation in speed (ms ) animationOutSpeed: 200, // Animation out speed (ms ) scrollText: '', // Text for element, can contain HTML scrollTitle: false, // Set a custom link title if required. Defaults to scrollText scrollImg: false, // Set true to use image activeOverlay: false, // Set CSS color to display scrollUp active point zIndex: 2147483647 // Z-Index for the overlay } ); } );</script><script type='text/javascript' src='/wp-content/plugins/smooth-scroll-up/js/jquery.scrollUp.min.js?ver=4.7.5'></script> <script type='text/javascript' src='/wp-content/themes/hueman/js/jquery.jplayer.min.js?ver=4.7.5'></script> <script type='text/javascript' src='/wp-content/themes/hueman/js/scripts.js?ver=4.7.5'></script> <script type='text/javascript' src='/wp-includes/js/comment-reply.min.js?ver=4.7.5'></script> <script type='text/javascript' src='/wp-includes/js/wp-embed.min.js?ver=4.7.5'></script>  </body> </html>