Мы регулярно сталкиваемся с необходимостью заглянуть в исходный код страницы по тем или иным причинам. В этой статье мы разберем как смотреть исходный код веб-страниц на примере популярных браузеров: Google Chrome, Mozilla FireFox, Internet Explorer, Opera, Safari.
Просмотр исходного кода веб страницы любого сайта доступен каждому. И для этого не нужно скачивать какие-либо приложения или устанавливать программы. Это легко можно сделать через браузер, так сказать "в режиме онлайн".
Во всех популярных браузерах есть как минимум 2 или 3 способа просмотра исходного кода страниц сайта
:
- Через контекстное меню правой кнопки мыши;
- Через комбинацию клавиш;
- Через пункт в меню браузера.
Также, если открытие кода в браузере вам по каким-то причинам на подходит, вы всегда можете сохранить страницу сайта себе на компьютер и открыть HTML файл с помощью текстового редактора, например "Блокнот".
Как посмотреть исходный код страницы в Сhrome
Способ 1.
Контекстное меню ПКМ --> Просмотр исходного кода.
Способ 2.
Горячие клавиши: Ctrl + U.
Как посмотреть исходный код веб страницы в Firefox
Способ 1.
Контекстное меню ПКМ --> Исходный код страницы.
Способ 2.
Горячие клавиши: Ctrl + U.
Способ 3.
Меню браузера: Инструменты --> Веб-разработка --> Исходный код страницы. Если вы не видите меню, попробуйте нажать ALT на клавиатуре.
Как посмотреть исходный код страницы в Internet Explorer
Способ 1.
Контекстное меню ПКМ --> Просмотр HTML-кода.
Способ 2.
Горячие клавиши: Ctrl + U.
Способ 3.
Меню браузера: Вид -->
Просмотр исходного кода страницы сайта в Opera
Способ 1.
Контекстное меню ПКМ --> Исходный текст страницы.
Способ 2.
Горячие клавиши: Ctrl + U.
Способ 3.
Меню: Разработка --> Исходный текст страницы.
Просмотр HTML кода страницы в Safari
Способ 1.
Контекстное меню ПКМ --> Посмотреть источник.
Способ 2.
Горячие клавиши: Ctrl + Alt + U.
Способ 3.
Меню браузера: Вид --> Просмотреть HTML-код. Если вы не видите меню, попробуйте нажать ALT на клавиатуре.
Если открыть любую веб-страницу, то она будет содержать в себе типичные элементы,
которые не меняются от вида и направленности сайта. В примере 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://i2.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://i2.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://i2.wp.com/semantica.in/wp-content/uploads/2018/02/09ffa0c60f.png' align="center" width="100%" loading=lazy></p>
<p>Выбираем опцию «Просмотр кода страницы» и получаем полный листинг в отдельной вкладке.</p>
<p><img src='https://i1.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://i1.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://i2.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://i0.wp.com/semantica.in/wp-content/uploads/2018/02/8fb9f8a3b8.png' align="center" width="100%" loading=lazy></p>
<p><img src='https://i0.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://i2.wp.com/semantica.in/wp-content/uploads/2018/02/1330f57b87.png' align="center" width="100%" loading=lazy></p>
<p>Если расположение панели справа неудобно, можно нажать три точки и поменять его, выбрав желаемый пункт.</p>
<p><img src='https://i0.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://i0.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://i0.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://i0.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://i0.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>
<p>Вероятность заглянуть в начальный <b>код
</b> веб-<b>страницы
</b> , получаемый браузером в результат на запрос серверу, есть фактически в всяком интернет-обозревателе. Доступ к соответствующей команде организован приблизительно идентично, но есть значительные отличия в том, каким методом и в каком виде вам будет представлен начальный <b>код
</b> .</p>
<h3>Инструкция</h3>
<p><b>1.
</b> В браузере Mozilla FireFox раскройте в меню раздел «Вид» и щелкните пункт «Начальный <b>код
</b> <b>страницы
</b> ». Такой же пункт есть и в контекстном меню, которое возникает, если щелкнуть правой кнопкой мыши текст <b>страницы
</b> . Дозволено применять и сочетание клавиш CTRL + U. Mozilla FireFox при этом не использует внешних программ – начальный <b>код
</b> <b>страницы
</b> с подсветкой синтаксиса будет открыт в отдельном окне браузера.</p><p><img src='https://i2.wp.com/st03.kakprosto.ru/tumb/680/images/article/2011/7/8/1_52552b95d5fa552552b95d5fe3.jpg' height="748" width="680" loading=lazy></p><p><b>2.
</b> В обозревателе Internet Explorer щелкните в меню раздел «Файл» и выберите «Править в Блокнот». Взамен наименования Блокнот может быть написана иная программа, которую вы назначили в настройках браузера для просмотра начального <b>код
</b> а. По щелчку <b>страницы
</b> правой кнопкой мыши выпадает контекстное меню, в котором тоже есть пункт, дозволяющий открыть начальный <b>код
</b> <b>страницы
</b> во внешней программе – «Просмотр HTML-<b>код
</b> а».</p><p><img src='https://i2.wp.com/st03.kakprosto.ru/tumb/680/images/article/2011/7/8/1_52552b95df96052552b95df9bd.jpg' height="669" width="663" loading=lazy></p><p><b>3.
</b> В браузере Opera откройте меню, перейдите в раздел «Страница» и у вас будет вероятность предпочесть в подразделе «Средства разработки» пункт «Начальный <b>код
</b> » либо пункт «Начальный <b>код
</b> фрейма». Такому выбору назначены жгучие клавиши CTRL + U и CTRL + SHIFT + U соответственно. В контекстном меню, привязанном к щелчку <b>страницы
</b> правой кнопкой мыши, тоже есть пункт «Начальный <b>код
</b> ». Opera открывает исходник <b>страницы
</b> во внешней программе, которая назначена в ОС либо в настройках браузера для редактирования HTML-файлов.</p><p><img src='https://i0.wp.com/st03.kakprosto.ru/tumb/680/images/article/2011/7/8/1_52552b95eb30952552b95eb346.jpg' width="100%" loading=lazy></p><p><b>4.
</b> Браузер Google Chrome безо любых сомнений имеет лучшую организацию просмотра начального <b>код
</b> а. Щелкнув страницу правой кнопкой мыши, вы можете предпочесть пункт «Просмотра <b>код
</b> а <b>страницы
</b> » и тогда исходник с подсветкой синтаксиса будет открыт на отдельной вкладке. А можете предпочесть в том же меню строку «Просмотр <b>код
</b> а элемента» и браузер в этой же вкладке откроет два дополнительных фрейма, в которых вы можете инспектировать HTML- и CSS-<b>код
</b> всякого элемента <b>страницы
</b> . Браузер будет реагировать на перемещение курсора по строкам <b>код
</b> а, подсвечивая на странице элементы, соответствующие этому участку HTML-<b>код
</b> а.</p><p><img src='https://i1.wp.com/st03.kakprosto.ru/tumb/680/images/article/2011/7/8/1_52552b9603c4652552b9603c84.jpg' width="100%" loading=lazy></p><p><b>5.
</b> В браузере Apple Safari раскройте раздел «Вид» и выберите строку «Просмотр HTML-<b>код
</b> а». В меню, которое возникает по щелчку правой кнопкой открытой <b>страницы
</b> , соответствующий пункт назван «Посмотреть источник». Этому действию назначены жгучие клавиши CTRL + ALT + U. Начальный <b>код
</b> открывается в отдельном окне браузера.</p><p><img src='https://i1.wp.com/st03.kakprosto.ru/tumb/680/images/article/2011/7/8/1_52552b960eafe52552b960eb45.jpg' width="100%" loading=lazy></p>
<p>Яндекс.Браузер может использоваться не только в качестве веб-обозревателя, но и как средство для создания интернет-страниц. Инструменты для разработки существуют в каждом веб-обозревателе, в том числе и в обсуждаемом нами на данный момент. Используя эти инструменты, пользователи могут смотреть коды HTML-страниц, следить за выполнением своих действий, отслеживать логи и находить ошибки в запущенных скриптах.</p>
<h2>Как открыть инструменты разработчика в Яндекс.Браузере</h2>
<p>Если вам необходимо открыть консоль для проведения каких-либо из описанных выше действий, то следуйте нашей инструкции.</p>
<p>Откройте меню и выберите пункт «<i>Дополнительно
</i>», в открывшемся списке выберите пункт «<i>Дополнительные инструменты
</i>», а затем один из трех пунктов:</p>
<ul><li>«<i>Показать код страницы
</i>»;</li>
<li>«<i>Инструменты разработчика
</i>»;</li>
<li>«<i>Консоль JavaScript
</i>».</li>
</ul><p><img src='https://i1.wp.com/lumpics.ru/wp-content/uploads/2017/01/Otkryit-instrumentyi-razrabotchikov-v-YAndeks.Brauzere.png' align="center" width="100%" loading=lazy></p>
<p>Все три инструмента имеют горячие клавиши для быстрого доступа к ним:</p>
<ul><li>Просмотр исходного кода страницы - <i>Ctrl+U
</i>;</li>
<li>Инструменты разработчика - <i>Ctrl+Shift+I
</i>;</li>
<li>Консоль JavaScript - <i>Ctrl+Shift+J
</i>.</li>
</ul><p><img src='https://i2.wp.com/lumpics.ru/wp-content/uploads/2017/01/Goryachie-klavishi-v-YAndeks.Brauzere.png' align="center" width="100%" loading=lazy></p>
<blockquote><p>Горячие клавиши работают при любой раскладке клавиатуры и с включенным CapsLock.</p>
</blockquote>
<p>Чтобы открыть консоль, вы можете выбрать пункт «<i>Консоль JavaScript
</i>», и тогда откроются инструменты разработчика на вкладке «<i>Console
</i>»:</p>
<p><img src='https://i1.wp.com/lumpics.ru/wp-content/uploads/2017/01/Konsol-v-YAndeks.Brauzere.png' align="center" height="772" width="556" loading=lazy></p>
<p>Аналогичным образом можно получить доступ к консоли, открыв через меню веб-обозревателя «<i>Инструменты разработчика
</i>» и вручную переключившись на вкладку «<i>Console
</i>».</p>
<p>Вы также можете открыть <i>«Инструменты разработчика»
</i>, нажав на клавишу F12. Этот способ является универсальным для многих браузеров. В этом случае опять же придется переключиться на вкладку «<i>Console
</i>» вручную.</p>
<p>Такие несложные способы запуска консоли значительно сократят ваше время и помогут сосредоточиться на создании и редактировании веб-страниц.</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>
</article>
<div id="Ads6343434343"></div> <br />
<div class='yarpp-related'>
<div class="related">
<p class="related__heading">Рекомендуем статьи по теме</p>
<div class="items">
<div class="item">
<div class="item__head">
<div class="item__image-wrap"><img class="item__image" src="/uploads/7847050688deabdcae617837a84d47d1.jpg" width="240" height="150" alt="Формат файла CBR – чем открыть на компьютере или устройстве Андроид" / loading=lazy></div> <a class="item__title" href="/tips/programma-dlya-chteniya-cbz-format-faila-cbr-chem-otkryt-na/">Формат файла CBR – чем открыть на компьютере или устройстве Андроид</a></div>
</div>
<div class="item">
<div class="item__head">
<div class="item__image-wrap"><img class="item__image" src="/uploads/b8df61e9a32a41444f370298d5d3fe06.jpg" width="240" height="150" alt="Вздутие аккумулятора в Power Bank" / loading=lazy></div> <a class="item__title" href="/reviews/vzdulsya-pover-bank-chto-delat-vzdutie-akkumulyatora-v-power-bank-a-chto-budet/">Вздутие аккумулятора в Power Bank</a></div>
</div>
<div class="item">
<div class="item__head">
<div class="item__image-wrap"><img class="item__image" src="/uploads/ac812690f2a8d20075870301b765a107.jpg" width="240" height="150" alt="Программы для накрутки трафика" / loading=lazy></div> <a class="item__title" href="/tips/programmy-dlya-nakrutki-trafika-horosho-eto-ili-ploho/">Программы для накрутки трафика</a></div>
</div>
</div>
</div>
</div>
<div class="respond" id="respond">
<p class="respond__cancel">
</p>
<form class="form" action="/wp-comments-post.php" method="post"> <label class="visually-hidden" for="comment">Комментарий</label><textarea class="form__input" id="comment" name="comment" rows="4" placeholder="Комментарий" required></textarea>
<div class="form__row">
<div class="form__row-item"> <label class="visually-hidden" for="comment-form-name">Ваше имя</label> <input class="form__input" id="comment-form-name" type="text" name="author" placeholder="Ваше имя" value="" required /></div>
<div class="form__row-item"> <label class="visually-hidden" for="comment-form-email">Ваш e-mail</label> <input class="form__input" id="comment-form-email" type="email" name="email" placeholder="E-mail" value="" required /></div>
</div>
<div class="form__bottom"> <button class="form__button" type="submit" name="submit">Комментировать</button>
<p class="form__agree">Нажимая кнопку, вы соглашаетесь с <a href="">политикой конфиденциальности</a> и правилами сайта, изложенными в пользовательском соглашении</p>
</div> <input type='hidden' name='comment_post_ID' value='85432' id='comment_post_ID' /> <input type='hidden' name='comment_parent' id='comment_parent' value='0' /></form>
</div>
</main>
<aside class="sidebar">
<div class="sidebar__section" id="nav_menu-3">
<div class="menu-glavnye-rubriki-container">
<ul id="menu-glavnye-rubriki-1" class="menu">
<li id="menu-item-" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="/category/safety/">Безопасность</a></li>
<li id="menu-item-" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="/category/interesting/">Интересное</a></li>
<li id="menu-item-" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="/category/news/">Новости</a></li>
<li id="menu-item-" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="/category/news/">Новости </a></li>
<li id="menu-item-" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="/category/reviews/">Обзоры </a></li>
<li id="menu-item-" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="/category/programs/">Программы</a></li>
<li id="menu-item-" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="/category/tips/">Советы </a></li>
</ul>
</div>
</div>
<div class="widget_text sidebar__section" id="custom_html-4">
<div class="textwidget custom-html-widget">
<div class="flat_side_1"></div>
</div>
</div>
</aside>
</div>
<div class="social social--wide" id="sidebar_stop">
<p class="social__text">Присоединяйтесь к нашим сообществам в социальных сетях</p>
<ul class="social__list">
<li class="social__item"> <a class="social__link social__link--vk" href="https://vk.com/share.php?url=https://www.alexgroup-studio.ru/news/kak-naiti-ishodnyi-kod-stranicy-kak-posmotret-ishodnyi-kod/" target="_blank" rel="noopener noreferrer" aria-label="ВКонтакте"></a></li>
<li class="social__item"> <a class="social__link social__link--ok" href="https://connect.ok.ru/offer?url=https://www.alexgroup-studio.ru/news/kak-naiti-ishodnyi-kod-stranicy-kak-posmotret-ishodnyi-kod/" target="_blank" rel="noopener noreferrer" aria-label="Одноклассники"></a></li>
<li class="social__item"> <a class="social__link social__link--in" href="" target="_blank" rel="noopener noreferrer" aria-label="Instagram"></a></li>
<li class="social__item"> <a class="social__link social__link--yt" href="https://youtube.com/?sub_confirmation=1" target="_blank" rel="noopener noreferrer" aria-label="YouTube"></a></li>
<li class="social__item"> <a class="social__link social__link--yz" href="" target="_blank" rel="noopener noreferrer" aria-label="Яндекс.Дзен"></a></li>
</ul>
</div>
<form class="subscribe subscribe--footer" name="subscribtion_form">
<p class="subscribe__text">Получайте первыми самые полезные советы наших экспертов, читайте эксклюзивные материалы и анонсы и никакого спама</p>
<div class="subscribe__inner">
<div class="subscribe__fields"> <input class="subscribe__input" type="text" name="email" placeholder="Введите Ваш e-mail" required /> <input class="subscribe__button" type="button" value="Подписаться на рассылку" onClick="$.post('/subscribe.php', $(this).parents('form').serialize());alert('Подписка на рассылку успешно оформлена!');"
/></div>
<p class="subscribe__privacy">Нажимая кнопку «Подписаться», я соглашаюсь с <a href="">Политикой конфиденциальности данных</a></p>
</div></form>
<footer class="footer">
<div class="footer__inner">
<p class="footer__section footer__copyright">
<img src="/logo/logo.svg" style="width:150px;" loading=lazy> © 2024<br /> alexgroup-studio.ru<br /> Все права защищены. Возрастной рейтинг <big><b>16+</b></big></p>
<nav class="footer__section footer-nav">
<ul class="footer-nav__list">
<li class="footer-nav__item"><a class="footer-nav__link" href="">О проекте</a></li>
<li class="footer-nav__item"><a class="footer-nav__link" href="/feedback/">Контакты</a></li>
<li class="footer-nav__item"><a class="footer-nav__link" href="">Политика конфиденциальности</a></li>
<li class="footer-nav__item"><a class="footer-nav__link" href="">Рекламная политика</a></li>
<li class="footer-nav__item"><a class="footer-nav__link" href="/sitemap.xml">Карта сайта</a></li>
</ul>
</nav>
<div class="footer__section footer__mid">
<div class="social social--footer">
<p class="social__text">Присоединяйтесь к нашим сообществам<br /> в социальных сетях</p>
<ul class="social__list">
<li class="social__item"> <a class="social__link social__link--vk" href="https://vk.com/share.php?url=https://www.alexgroup-studio.ru/news/kak-naiti-ishodnyi-kod-stranicy-kak-posmotret-ishodnyi-kod/" target="_blank" rel="noopener noreferrer" aria-label="ВКонтакте"></a></li>
<li class="social__item"> <a class="social__link social__link--ok" href="https://connect.ok.ru/offer?url=https://www.alexgroup-studio.ru/news/kak-naiti-ishodnyi-kod-stranicy-kak-posmotret-ishodnyi-kod/" target="_blank" rel="noopener noreferrer" aria-label="Одноклассники"></a></li>
<li class="social__item"> <a class="social__link social__link--in" href="" target="_blank" rel="noopener noreferrer" aria-label="Instagram"></a></li>
<li class="social__item"> <a class="social__link social__link--yt" href="https://youtube.com/?sub_confirmation=1" target="_blank" rel="noopener noreferrer" aria-label="YouTube"></a></li>
</ul>
</div>
<nav class="footer-nav footer-nav--alt">
<ul class="footer-nav__list">
<li class="footer-nav__item"><a class="footer-nav__link" href="/feedback/">Контакты</a></li>
<li class="footer-nav__item"><a class="footer-nav__link" href="">Авторы и эксперты</a></li>
<li class="footer-nav__item"><a class="footer-nav__link" href="/sitemap.xml">Карта сайта</a></li>
<li class="footer-nav__item"><a class="footer-nav__link" href="">Реклама</a></li>
</ul>
</nav>
<p class="social__text">Программы, безопасность, обзоры, новости <br />
<br /> <br />Контактные данные для государственных органов (в том числе, для Роскомнадзора):<br /> E-mail: </p>
</div> <img class="footer__section" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20125%20113'%3E%3C/svg%3E" width="125" height="113" alt="" data-lazy-src="https://alexgroup-studio.ru/wp-content/themes/alexgroup-studio.ru/img/kaptsov-media.png"
/ loading=lazy></div>
<div class="stats" align="center"></div>
</footer>
</div>
</div>
<div class="menu">
<div class="menu__inner">
<header class="menu__header">
<p class="menu__logo"> <span class="menu__logo-title"><img src="/logo/logo.svg" style='max-width:270px;min-width:150px;filter: invert(100%);-webkit-filter: invert(100%);' loading=lazy><span class="menu__logo-desc">Программы, безопасность, обзоры, новости</span></span> </p>
<nav class="categories">
<p class="categories__heading">Главные рубрики</p>
<ul class="categories__list">
<li class="categories__item"><a class="categories__link" href="/category/safety/">Безопасность</a></li>
<li class="categories__item"><a class="categories__link" href="/category/interesting/">Интересное</a></li>
<li class="categories__item"><a class="categories__link" href="/category/news/">Новости</a></li>
<li class="categories__item"><a class="categories__link" href="/category/news/">Новости </a></li>
<li class="categories__item"><a class="categories__link" href="/category/reviews/">Обзоры </a></li>
<li class="categories__item"><a class="categories__link" href="/category/programs/">Программы</a></li>
<li class="categories__item"><a class="categories__link" href="/category/tips/">Советы </a></li>
</ul>
</nav>
<form class="search__form" method="get" action="/"> <label class="visually-hidden" for="search">Поиск по сайту</label> <input class="search__input" type="search" id="search" name="s" value="" required /> <button class="search__button" type="submit" aria-label="Найти"></button></form>
<button
class="menu__close" type="button" aria-label="Закрыть меню"></button>
</header>
<div class="wrap">
<nav class="menu__nav">
<ul class="menu__list">
<li class="menu__item"><a class="menu__link" href="/category/safety/">Безопасность</a></li>
<li class="menu__item"><a class="menu__link" href="/category/interesting/">Интересное</a></li>
<li class="menu__item"><a class="menu__link" href="/category/news/">Новости</a></li>
<li class="menu__item"><a class="menu__link" href="/category/news/">Новости </a></li>
<li class="menu__item"><a class="menu__link" href="/category/reviews/">Обзоры </a></li>
<li class="menu__item"><a class="menu__link" href="/category/programs/">Программы</a></li>
<li class="menu__item"><a class="menu__link" href="/category/tips/">Советы </a></li>
</ul>
</nav>
<nav class="menu-services__nav">
<p class="menu-services__heading">Новые материалы</p>
<ul class="menu-services__list">
<li class="menu-services__item">
<a class="menu-services__link" href="/news/besplatnaya-nakrutka-podpischikov-v-instagrame-bez-usilii-nakrutka-podpischikov-v-instagram-programmy/">
<div class="menu-services__icon"></div>Накрутка подписчиков в Инстаграм: программы, приложения и сервисы Лайк инстаграмм</a>
</li>
<li class="menu-services__item">
<a class="menu-services__link" href="/news/gadzhety-v-podarok-devushke-novye-luchshie-gadzhety-dlya-zhenshchin-uhod-za-licom/">
<div class="menu-services__icon"></div>Новые лучшие гаджеты для женщин: уход за лицом</a>
</li>
<li class="menu-services__item">
<a class="menu-services__link" href="/safety/programmirovanie-na-mac-kak-programmist-windows-mozhet-byt/">
<div class="menu-services__icon"></div>Как программист Windows может быть достаточно продуктивным в Mac OS X?</a>
</li>
<li class="menu-services__item">
<a class="menu-services__link" href="/safety/chto-delat-esli-ne-udalos-podklyuchitsya-k-serveru-warface-chto/">
<div class="menu-services__icon"></div>Что делать если не удалось подключиться к серверу Warface Проблемы с брандмауэром</a>
</li>
<li class="menu-services__item">
<a class="menu-services__link" href="/interesting/vvedenie-informatika-i-informaciya-predmet-i-zadachi-ponyatie/">
<div class="menu-services__icon"></div>Информатика и информация</a>
</li>
<li class="menu-services__item menu-services__item--active">
<a class="menu-services__link">
<div class="menu-services__icon"><img src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" alt="" data-lazy-src="https://alexgroup-studio.ru/wp-content/uploads/2020/03/vse-prazdniki.png" / loading=lazy></div>Праздники</a>
</li>
</ul>
</nav>
<section class="contests">
<p class="contests__heading">Популярное</p>
<div class="contests__items">
<div class="contests__item"> <img class="contests__image" src="/uploads/d75dd1b6ac1c62f82d8d8804b7402da5.jpg" width="305" height="123" alt="Как возвращают деньги на Алиэкспресс после спора: стадии возврата" / loading=lazy> <a class="contests__title" href="/safety/esli-spor-zakryli-a-dengi-ne-vernuli-kak-vozvrashchayut-dengi-na-aliekspress/">Как возвращают деньги на Алиэкспресс после спора: стадии возврата</a></div>
<div class="contests__item"> <img class="contests__image" src="/uploads/c7a41d11d6262fd8e8a84f888c44e212.jpg" width="305" height="123" alt="Что делать если устройство USB не опознано?" / loading=lazy> <a class="contests__title" href="/news/pishet-ustroistvo-usb-ne-opoznano-chto-delat-chto-delat-esli/">Что делать если устройство USB не опознано?</a></div>
<div class="contests__item"> <img class="contests__image" src="/uploads/66e493bee7bd25c809d2ee0a70d4ebee.jpg" width="305" height="123" alt="Подробная характеристика SIP клиентов для ПК и смартфона Программный sip" / loading=lazy> <a class="contests__title" href="/tips/programmy-dlya-ip-telefonii-podrobnaya-harakteristika-sip/">Подробная характеристика SIP клиентов для ПК и смартфона Программный sip</a></div>
</div>
</section>
</div>
<div class="wrap">
<div class="social social--menu">
<ul class="social__list">
<li class="social__item"> <a class="social__link social__link--vk" href="https://vk.com/share.php?url=https://www.alexgroup-studio.ru/news/kak-naiti-ishodnyi-kod-stranicy-kak-posmotret-ishodnyi-kod/" target="_blank" rel="noopener noreferrer" aria-label="ВКонтакте"></a></li>
<li class="social__item"> <a class="social__link social__link--ok" href="https://connect.ok.ru/offer?url=https://www.alexgroup-studio.ru/news/kak-naiti-ishodnyi-kod-stranicy-kak-posmotret-ishodnyi-kod/" target="_blank" rel="noopener noreferrer" aria-label="Одноклассники"></a></li>
<li class="social__item"> <a class="social__link social__link--in" href="" target="_blank" rel="noopener noreferrer" aria-label="Instagram"></a></li>
<li class="social__item"> <a class="social__link social__link--yt" href="https://youtube.com/?sub_confirmation=1" target="_blank" rel="noopener noreferrer" aria-label="YouTube"></a></li>
<li class="social__item"> <a class="social__link social__link--yz" href="" target="_blank" rel="noopener noreferrer" aria-label="Яндекс.Дзен"></a></li>
</ul>
</div>
<form class="subscribe subscribe--menu" name="subscribtion_form">
<p class="subscribe__text">Получайте первыми самые полезные советы наших экспертов, читайте эксклюзивные материалы и анонсы и никакого спама</p>
<div class="subscribe__inner">
<div class="subscribe__fields"> <input class="subscribe__input" type="text" name="email" placeholder="Введите Ваш e-mail" required /> <input class="subscribe__button" type="button" value="Подписаться на рассылку" onClick="$.post('/subscribe.php', $(this).parents('form').serialize());alert('Подписка на рассылку успешно оформлена!');" /></div>
<p class="subscribe__privacy">Нажимая кнопку «Подписаться», я соглашаюсь с <a href="">Политикой конфиденциальности данных</a></p>
</div> <input type="hidden" name="charset" value="UTF-8"> <input type="hidden" name="default_list_id" value="20043641"> <input type="hidden" name="overwrite" value="2"> <input type="hidden" name="is_v5" value="1"></form>
</div>
</div>
</div>
</body>
</html> 