Как получить html код страницы js

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

Если вам нужно проанализировать содержимое страницы в формате HTML, самый простой способ — это открыть её исходный код. С его помощью можно посмотреть метатеги, скопировать часть кода для парсинга, изучить стили оформления страницы, узнать о наличии подключённых счётчиков аналитики, dofollow и nofollow ссылках. Коды страниц доступны для просмотра любому пользователю. Из этого поста вы узнаете, как открыть исходный код в разных браузерах.

1. Что такое исходный код страницы, и как его посмотреть

Исходный код страницы отображается как набор HTML-описаний, CSS-стилей и Java-скриптов. Это список команд, которые сервер передаёт браузеру в ответ на запрос пользователя. Посмотреть можно код практически любой страницы, даже не являясь владельцем сайта, но внести постоянные корректировки в код могут хостинг-провайдер, владелец сайта или администратор.

1.1. Как открыть код страницы

Перейдите на страницу, которую нужно проанализировать. Для отображения кода используйте сочетание клавиш Ctrl + U . Откроется подробное описание страницы в формате HTML-разметки, тегов и скриптов.

• названия title, description;
• данные микроразметки Schema.org, Open Graph или других словарей;
• данные JavaScript;
• язык отображения контента на странице;
• подключенные счётчиков аналитики, генераторов заявок и других сервисов;
• исходящие ссылки на другие страницы и сайты;
• расположение картинок, заголовков и текстовых блоков;
• размеры и тип шрифтов, цвета элементов.

Для детального анализа откройте код страницы вместе с инструментами разработчика. Это можно сделать в любом браузере через настройки или сочетание клавиш Ctrl + Shift + I . Например, в Яндекс.Браузере нужно открыть меню параметров, выбрать дополнительные инструменты и пункт «Инструменты разработчика».

Инструменты для вебмастеров появляются в том же окне рядом с открытой страницей.

При наведении курсора мыши на участке HTML в тексте слева подсветится элемент, который описан этим участком. Для более подробного анализа данных выберите один из разделов в верхней правой части окна:

• Elements → описывает все элементы страницы.
• Console → выявляет возможные и критические ошибки кода.
• Sources → показывает содержимое файлов на странице.
• Network → указывает код ответа сервера, время загрузки страницы и ее размер.
• Security → отображает информацию о сертификате SSL.
• Audits → позволяет провести технический аудит мобильной или десктопной версии страницы.

Дальше рассмотрим, как открыть исходный код страницы в разных браузерах.

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

В меню настроек в правой верхней части экрана выберите «Дополнительные инструменты», затем пункт «Инструменты разработчика».

Выбрать соответствующий пункт можно также в контекстном меню правой кнопки мыши.

1.3. Как посмотреть исходный код веб-страницы в Mozilla Firefox

Зайдите в «Инструменты» → «Веб-разработка» → «Исходный код страницы».

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

Нажмите в верхней панели «Меню» → «Разработка» → «Исходный код страницы».

1.5. Как посмотреть исходный код страницы в Safari

Откройте раздел «Разработка» в верхнем меню браузера.

Safari, кстати, ещё отображает коды веб-страниц через смартфон. Зайдите в параметры мобильного браузера и выберите «View Source».

1.6. Как посмотреть исходный код страницы в Microsoft Edge

В Microsoft Edge источник страницы открывается через параметры (три точки) → «Дополнительные средства» → «Средства разработчика».

В каждом браузере также доступен просмотр кода элемента: логотипа, картинки, заголовка. Для анализа HTML-разметки отдельного объекта необходимо навести курсор и выбрать в контекстном меню правой кнопки мыши пункт «Исследовать код элемента».

1.7. Как посмотреть исходный код страницы с помощью Netpeak Spider

1. Если вам нужно посмотреть код уже проскариванного краулером URL, выделите его и воспользуйтесь комбинацией клавиш Ctrl + U либо откройте контекстное меню и выберите пункт «Исходный код и HTTP-заголовки».
2. Затем откроется окно инструмента, где вы можете детально изучить исходный код.
3. Чтобы посмотреть код страницы, которая не была просканирована Netpeak Spider, откройте инструмент через меню «Запустить».
4. Вставьте нужный URL и нажмите «Старт» для начала анализа.

У Netpeak Spider есть бесплатная версия без ограничений по времени, в которой у вас будет возможность проанализировать исходный код и HTTP-заголовки URL. Также в Freemium-версии доступно много других базовых функций.

Чтобы начать пользоваться бесплатным Netpeak Spider, просто зарегистрируйтесь, скачайте и установите программу — и вперёд! ��

Ознакомиться со всеми особенностями инструмента «Анализ исходного кода и HTTP-заголовков» вы можете в посте на нашем блоге.

Подводим итоги

Исходный код страницы открывается в разных браузерах и доступен для просмотра всем пользователям. Чтобы открыть код в отдельном окне, используйте сочетание клавиш Ctrl + U или выберите соответствующий пункт в параметрах браузера. Код страницы состоит из элементов HTML, описаний стилей CSS и JavaScript. По этим данным можно изучить разметку страницы, и узнать множество других сведений о странице и её содержании

А для чего вы просматриваете исходный код страницы? Делитесь в комментариях 🙂

Получение html-кода страницы. JS из 1С

Всё нижеописанное уже так или иначе общеизвестно и опубликовано. Поскольку я ни разу не знаток javascript, данная заметка не претендует на «статью» и носит скорее антисклерозный характер. Основная задача — парсинг сайтов (кто о чём, а я всё о том же), а значит, получение исходного текста страницы. Мы имеем дело с HTML5 и спецификациями этого поколения, и с WebKit, которое с релиза 8.3.14.1565 вместо старого IE (подробнее об эпичном переходе // ПолучитьCOMОбъект не применять, чаще вызывает ошибку создания объекта по классу хтмл=Новый COMОбъект(«HTMLFile»); хттп=Новый COMОбъект(«winhttp.winhttprequest.5.1»); хттп.Open(«GET», «httрs://infostart.ru»); хттп.Send(); хтмл.Write(хттп.Responsetext); // синхронная обработка стрТело=хтмл.body.outerText; // и так далее, обрабатываем как COM-объект

Следует учитывать, что используемые объекты зависят от MSIE и зарегистрированного класса, обрабатывается всё средствами ОС и может быть устаревшей версии; ну и COM не кроссплатформенно к тому же. Поэтому далее мы такое не рассматриваем. Во втором случае на форме размещается реквизит типа «Строка» неограниченной длины, с видом «Поле HTML документа», и ему присваивается локальный или сетевой URL. В момент присвоения начинается загрузка документа. Здесь и далее документ определяется как

хтмл=Элементы.ПолеХТМЛ.Документ;

Окончание загрузки правильнее всего определять по совокупности двух факторов: возникновения события ЭУ 1С «ДокументСформирован» и по выставлении свойства «readyState», равному «complete». Замечено, что, несмотря на теорию, в текущих релизах эти события не синонимичны; полагаю, потому, что событие 1С срабатывает при «interactive», когда уже загружена страница и построено DOM-дерево, но картинки и айфреймы ещё догружаются (т.е. вызвано не Load, а DOMContentLoaded). Либо, возможны новые изменения-догрузки сразу после первой загрузки. Разумно делать обработчик ожидания с выключением в момент полной загрузки. Мы можем оперировать DOM-моделью документа, методами документа и его элементов. Проверено, что все методы HTML5 работают корректно, с двумя скверными особенностями — они далеко не всегда вызывают ошибки (так, «removeAttribute» при указании несуществующего атрибута никак не ругается) и «пустое» значение js не синонимично пустому в 1С (так, правильнее проверять не «ЗначениеЗаполнено(хтмл)», а «ТипЗнч(хтмл)=Тип(«Неопределено») и т.д.) Мы не можем работать с глобальными переменными — они не сохраняются между сеансами обращения к документу. Т.е. в некоем контексте, в т.ч. контексте документа в целом, можно объявить переменную, и в рамках фрагмента кода js она будет, но следующее обращение столкнётся даже не с пустой переменной, а с её отсутствием. Не рекомендую ни в каком месте js-кода использовать this — оно или пусто, или некорректно. Возможно, это исправят в других релизах, но надёжнее указывать полный путь к объекту. Если объект создан динамически, тоже пишите его явно. Вместо «parentWindow» используем «DefaultView», хорошо известное как Document.Window, и можем вызывать скрипты страницы. Также, можем добавлять собственные скрипты (что мне представляется более верным и менее травматичным для документа, нежели подвешивание кусков кода на события и вызов этих событий, как предложено в статье 2016 года). Делается это так:

&НаКлиенте Функция ДобавитьСкрипт(рТекстСкрипта,рИдСкрипта="") хтмлДокумент=Элементы.ПолеХТМЛ.Документ; Если ПустаяСтрока(рИдСкрипта) Тогда рИдСкрипта="Add"+Строка(хтмлДокумент.scripts.length+1); КонецЕсли; // хтмлСкрипт=хтмлДокумент.getElementById(рИдСкрипта); Если ТипЗнч(хтмлСкрипт)=Тип("Неопределено") Тогда хтмлСкрипт=хтмлДокумент.createElement("script"); хтмлСкрипт.id=рИдСкрипта; хтмлСкрипт.setAttribute("type","text/javascript"); // в хтмл5 не надо, но пусть. хтмлСкрипт.setAttribute("async",Ложь); // т.к. по умолчанию создаёт Истина хтмлСкрипт.innerText=рТекстСкрипта; // вносим хтмлДокумент.head.appendChild(хтмлСкрипт); КонецЕсли; // Возврат хтмлСкрипт; КонецФункции 

Можно вносить не в скрипты head’a, а в конец body. Документ уже загрузился, всякие асинхроны своё отрабатывают без учёта наших скриптов, Defer всё равно ни на что не влияет. Перезагрузка страницы при этом не происходит, designMode=»on» включать не обязательно. Но важно учитывать, что, если текст скрипта не обёрнут в функцию, то он выполнился сразу в момент срабатывания appendChild, поэтому советую в скрипты класть именованные функции js или осознанно применять эту фичу. А вообще рез=Элементы.ПолеХТМЛ.Документ.DefaultView.Math1(100,50); // и получим 150

Это удобнее, чем присваивать результаты неким свойствам неких объектов и вычитывать их оттуда, или ловить в параметрах событий через createEventObject() и брать из Event.data. Кроме того, не все типы данных могут пережить это преобразование (так, для ArrayBuffer или Blob у меня не сработало, да и про объекты js есть сомнения). А так мы имеем прямое обращение к функции js из языка 1С. Для входных параметров ограничений или искажений экспериментально не обнаружено. Замечу, что можно многократно добавлять функцию с тем же именем, js просто перезаписывает её код поверх старого (и, кстати, известная разница между «a=func1 и a=func1()» наблюдается и в 1С). Также замечу, что можно добавить одним куском кода в один скрипт сразу несколько функций. Если скрипт добавлен, а обращение по имени вызывает ошибку (1С пишет, что метод не найден), значит, где-то в коде js ошибка, он не скомпилировался и не добавился — так можно себя проверять «на лету». Задействовать Eval мне не удалось — ошибки не происходит, но и ничего не делает. Теперь переходим к решению заявленной задачи. 1. Можно обратиться к свойству outerHTML:

// получим всё, кроме самых базовых объявлений и узлов вроде DOCUMENT_TYPE_NODE стрИсходник=Элементы.ПолеХТМЛ.Документ.documentElement.outerHTML; // или так: // получим только head и body стрИсходник=Элементы.ПолеХТМЛ.Документ.head.outerHTML+Элементы.ПолеХТМЛ.Документ.body.outerHTML; // или так (хотя не лучший вариант) стрИсходник=Элементы.ПолеХТМЛ.Документ.getElementsByTagName('html')[0].innerHTML;

Но нам-то надо получить вообще всё, все объявления. Конечно, можно кропотливо собрать эту информацию по свойствам и подузлам, вроде Документ.contentType, doctype.name, по nodeType, но, например, коллекции вроде doctype.childNodes пусты, да и вообще есть шанс что-то потерять. 2. Можно использовать Node.js — сильно могучую штуковину, имеющую возможности различной сериализации и выгрузки, которую, однако, надо инсталлировать; потому отпадает. Тем, кто соберётся: обязательно всюду, где только можно, явно указывайте всякие encoding и charset по Документ.inputEncoding, взятому из документа, иначе жесть. 3. webBrowser.DocumentText неприменимо, т.к. нет такого ЭУ — webBrowser (если, конечно, не мучиться долго и старательно с обёртками и актив-иксинами), и опять же, он не кроссплатформенный. Можно, конечно, сделать com-объект MSIE.Application и дёргать его, но зачем. 4. Можно так:

рАсинхронно=Истина; рОбъект=Новый COMОбъект("MSXML2.XMLHTTP"); рОбъект.Open("GET","httрs://infostart.ru", рАсинхронно);

Но капризничает, если неправильно написан адрес в части префиксов, доменов, протоколов; и любит, чтоб сайт был по возможности статичным, чей хтмл известен уже прямо целиком, что в наше время редкость. 5. Можно использовать (и мне понравился этот способ) объект XMLSerializer. Это часть современной js, и у неё есть метод сериализации всея документа в строку:

var S1 = new XMLSerializer(); var StrSource = S1.serializeToString(document); // или любой элемент-подузел

В этом случае будет возвращено всё, включая декларацию , хтмл с его объявлениями пространств имён, скриптами и т.д., словом, то, что надо. Кодировка UTF-8, и, судя по утверждениям гуру с хабра, с кодировкой он не лажает. Правда, немного жаль, что для этого же сериализатора метод serializeToStream, описанный здесь, более не работает. Кстати, теперь у нас есть возможность обработать двоичный поток, и можно было бы сделать нечто такое:

рЧтение=Новый ЧтениеHTML; рЧтение.ОткрытьПоток(рПоток,"UTF-8"); // где рПоток напрямую получен из js-функции, а там из serializeToStream 

но увы, это уже не поддерживается. Правда, можно поиграть с XMLHttpRequest, вместо .responseType=»text» и responseText читая результат из собственно response в виде arraybuffer или blob (в 1С уже есть инструменты работы с ними), или даже в виде «ms-stream», если только для IE. Но: этот объект требует асинхронного вызова, а с этим у js-в-1С некоторые трудности. Проще говоря, ни fetch, ни промисы адекватно не отрабатывают либо даже не компилируются. Мне не удалось даже подвесить функцию на событие OnLoad для ХHR, и ничего лучше тупого цикла по статусу реквеста не взлетело. Таким образом, синхронное получение исходного текста документа загруженной страницы html это:

function getContentAsString(elem)

Добавляем скрипт с этой функцией. Вызываем:

рИсходныйКод=Элементы.ПолеХТМЛ.Документ.DefaultView.getContentAsString(Элементы.ПолеХТМЛ.Документ);

Наблюдаем свежедобавленный скрипт среди прочих в head. Вот, собственно, и всё. В прежние времена писали ОболочкаХТМЛ.ПолучитьТекст() и были счастливы, но прогресс не стоит) . и я грустно пошёл переделывать свои старые публикации под новую механику. Потому что беда общая. Буде кто готов сию пещерную дикость развить и дополнить, всецело приветствую. P.S. Если вдруг захочется использовать возможности js, можно сделать совсем пустой документ (благо, теперь это всего лишь 6 тегов без хитрых объявлений), и добавлять вышеописанным способом свои скрипты в него. По сути, динамически набросать модуль из js-функций, сохранить в файл и юзать по необходимости. Опыты проводились на 1С х86 8.3.16.1063

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

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

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

Исходный код страницы — это вид страницы на языке кода. Он выглядит как список пронумерованных строк, где каждая содержит информацию о конкретном объекте на сайте. Код страницы состоит из трех элементов:

• HTML — гипертекстовая разметка, которая отвечает за всю структуру страницы. С помощью нее делают текст, блоки, основные элементы сайта.
• CSS — работает в связке с HTML через теги и отвечает за визуализацию: размер, стиль, шрифты, форму, фон.
• JavaScript — логический язык программирования, который отвечает за более сложные элементы. Например, анимацию, аналитику или интерактив.

Как выглядит исходный код страницы сайта

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

• Как собран текст страницы и какие ссылки используются.
• Какие метатеги и ключевые слова использованы.
• Какое описание (description) и название (title) страницы.
• Подключены ли страницы к «Яндекс.Метрике», Google Analytics, скрипты, счетчики, плагины, пиксели.

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

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

Читайте также: 76 ссылок, которые помогут сделать концепцию дизайна эффективнее и быстрее

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

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

Код страницы можно посмотреть в двух режимах:

• Исходный код — загружается версия страница в формате HTML-кода.
• Инспектор — запускается консоль для просмотра и управления кода.

Два способа посмотреть код: в отдельной вкладке или через консоль

Чтобы посмотреть исходный код страницы, используйте горячие клавиши в любом браузере:

• Ctrl+U — посмотреть код в новой вкладе на Windows.
• Ctrl+Shift+C — открыть инспектор кода на Windows.
• cmd+U — открыть исходный код на MacOS.
• alt+cmd+U — открыть инспектор кода на MacOS.

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

Google Chrome

Нажмите правой кнопкой мыши на странице и выберите:

• Посмотреть код страницы. Код откроется в отдельной вкладке.
• Посмотреть код. Откроется инспектор для просмотра кода в текущей вкладке.

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

Safari

Чтобы пункт «Посмотреть исходный код» появился, сначала потребуется включить опцию его просмотра:

• Откройте настройки браузера в меню Safari.
• Перейдите во вкладку «Дополнение».
• Поставьте галочку на пункте «Показывать меню „Разработка“ в строке меню».

Как включить просмотр кода в браузере Safari

После этого открываете страницу в интернете, щелкаете правой кнопкой мыши и выбираете:

• Показать программный код страницы. Открыть код страницы в новой вкладке.
• Проверить объект. Включить инспектора.

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

Opera

Откройте страницу и кликните правой мышкой по любой области на экране. Выберите:

• Исходный текст страницы. Код откроется отдельной вкладкой.
• Просмотреть код элемента. Запустить инспектора.

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

Mozilla Firefox

Откройте страницу и кликните правой мышкой. Выберите:

• Исходный код страницы. Посмотреть код в новой вкладке.
• Использовать свойства поддержки доступности. Это специальная технология, которая поможет другим программам читать страницы для людей с ограниченными возможностями.
• Исследовать. Включает доступ к инспектору для просмотра кода страницы.

Как посмотреть исходный код страницы в Mozilla Firefox

Microsoft Edge

Откройте страницу и нажмите правой кнопкой мыши по любой области. В меню доступно:

• Просмотреть исходный код. Открыть код страницы в отдельной вкладке браузера.
• Проверить. Включить инспектора на странице.

Как посмотреть исходный код страницы в Microsoft Edge

«Яндекс.Браузер»

Откройте страницу и нажмите правой клавишей мыши:

• Просмотреть код страницы. Открыть код в новой вкладке.
• Исследовать элемент. Запустить инспектор кода.

Как посмотреть исходный код страницы в «Яндекс.Браузере»

Браузер на телефоне

На телефоне инспектор недоступен, но можно открыть исходный код с помощью строки «view-source:url-сайта». Например, вот так можно посмотреть страницу Workspace — «view-source:workspace.ru».

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

Как использовать исходный код

Вы можете редактировать сайт и изучать его структуру.

Редактирование страницы

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

• менять блоки и их содержимое для проверки их отображения или тестирования;
• делать скриншоты для себя или в качестве технических заданий для копирайтеров, программистов или дизайнеров.

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

• В режиме инспектора нажмите на курсор около вкладки «Элементы» (Elements).
• Выберите курсором интересующий элемент сайта: блок, текст, картинку, заголовок.

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

В итоге над элементом появится информация о примененных CSS-стилях, а во вкладке «Элементы» (Elements) — конкретная строка в HTML-коде. Ее можно редактировать. Например, изменить текст — в нашем примере это строка h1.

Как найти элемента сайта в его исходном коде

Кликаем два раза и в окне «Элементы» (Elements) пишем что угодно. Изменение сразу отобразится на сайте.

Как изменить элемент сайта с помощью инспектора

Также можно менять CSS-стили. Например, изменить размер отображаемой картинки. Выберите элемент сайта и в разделе Стили (Styles) пролистайте в самый низ, где предлагают изменить размер изображения. Введите новые значения и сохраните.

Как изменить CSS-стиль через исходный код

Проверить SEO-оптимизацию

Вы можете проверить заголовки, тайтл и дескрипшн любой страницы. Для этого откройте режим просмотра кода в новой вкладке и через поиск (Ctrl+F) ищите следующие строки:

• title — название страницы,
• description — описание страницы,
• h1-h6 — заголовки,
• alt — теги для изображений.

Как посмотреть тайтл и дескрипшн через исходный код

Эти данные отвечают за продвижение статей через поисковики. Тайтл и дескрипшн отображается в заголовке и сниппете карточки в поисковике, а h1-h2 отвечают за логику всего документа, что тоже влияет на выдачу. Alt — описывают содержимое картинок, что пригодится для соответствующего поиска.

Параметры страницы, который можно найти в ее исходном коде

Подробнее о SEO-продвижении и способах улучшить свои позиции в поисковиках читайте в статьях:

• «Внутренняя оптимизация сайта: все, что нужно знать о техническом SEO»
• «Как оптимизировать картинки для SEO-продвижения и привлечь дополнительный трафик»
• «Как сделать расширенные сниппеты в выдаче „Яндекса“ и Google»

Заключение

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

Задачи на тендерной площадке Workspace в категории «SEO»

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

Workspace.LIVE — мы в Телеграме

Новости в мире диджитал, ответы экспертов на злободневные темы, опросы, статьи и многое другое. Подписывайтесь: https://t.me/workspace

Вакансии

• SMM-менеджер
  UnyBrands Удаленная работа 100 000 – 160 000
• Специалист для настройки VDS-сервера
  WISPO Удаленная работа от 2 500
• Administrative Support Manager
  F`ART Удаленная работа 70 000 – 150 000
• Технический специалист по контекстной рекламе
  Склифосовский ПРО Удаленная работа 20 000 – 30 000
• Специалист по контекстной рекламе
  Склифосовский ПРО Удаленная работа 50 000 – 90 000

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

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

Для каких целей нужен навык чтения кода и как в несколько кликов посмотреть содержимое сайта? Об этом и многом другом поговорим в сегодняшней статье.

Зачем мне нужен исходный код сайта?

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

• SEO-специалистам. Не всегда есть возможность проанализировать страницу и узнать, есть ли с ней какие-либо проблемы. Например, чтобы узнать Description страницы, можно не пользоваться специальными плагинами и прочими средствами – достаточно открыть исходный код, и описание будет перед глазами. Аналогичным образом можно посмотреть заголовок страницы, узнать, подключена ли Яндекс.Метрика и другие скрипты.
• Для более глубокого анализа конкурентов. Посмотреть, какими способами продвигается сайт, мы можем через код: ключевые слова, мета-теги и прочее – все это доступно для обычного пользователя.
• Веб-дизайнерам. Речь снова идет о конкуренции, но и не только. Когда дизайнер создает свой сайт, он часто обращается к различным ресурсам, чтобы посмотреть, как расположены те или иные элементы. Все это мы можем узнать на любом сайте: какой отступ у этой кнопки, какого она размера, сколько пикселей та фотография и так далее.
• Для лучшего понимания кода. Изучив основы HTML-кода и CSS-стилей, вы сможете понять, как работает ваш верстальщик и какие элементы следует оптимизировать.

Еще несколько возможностей при просмотре кода страницы: выгрузка картинок с исходным размером, просмотр сайта в адаптивном режиме, возможность изменять содержимое веб-страницы. Последнее работает в локальном режиме – изменения будут применены только на текущем ПК до тех пор, пока страница не будет обновлена.

Комьюнити теперь в Телеграм
Подпишитесь и будьте в курсе последних IT-новостей

Как узнать код сайта

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

Как видите, здесь все логично и понятно.

Подробнее о том, что представляет собой код сайта, мы поговорим в следующем разделе, а пока давайте рассмотрим основные способы его просмотра.

Способ 1: Функция «Посмотреть код»

Открываем страницу, код которой нужно просмотреть, и кликаем по любой области правой кнопкой мыши. В отобразившемся меню выбираем «Посмотреть код». Также вы можете воспользоваться комбинацией клавиш «CTRL+SHIFT+I».

В результате мы попадаем в инспектор браузера – на экране появляется дополнительное окно, где сверху находится код страницы, а снизу – CSS-стили.

Обратите внимание на то, что запуск инструмента разработчика выполнялся в Google Chrome. В другом браузере название кнопки запуска может отличаться.

Способ 2: «Просмотр кода страницы»

Если в предыдущем случае мы могли открыть всю подноготную сайта, то сейчас нам будет доступен лишь HTML-код. Чтобы его посмотреть, находим на сайте пустое поле и кликаем по нему правой кнопкой мыши, затем выбираем «Просмотр кода страницы» (можно воспользоваться комбинацией клавиш «CTRL+U»). Если вы кликните правой кнопкой по элементу сайта, то кнопка «Просмотр кода страницы» будет отсутствовать.

После этого нас перенаправит на новую страницу со всем исходным кодом:

Здесь мы также можем посмотреть все содержимое страницы, однако узнать CSS и изменить данные у нас не получится.

Что такое HTML и CSS

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

Например, часто используется такая конструкция:

, где h1 – тег, обозначающий заголовок первого уровня, внутри которого находится текст, отображаемый на странице.

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

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

Рассмотрим на небольшом примере, как работают стили:

1. Допустим, у нас есть HTML-тег с текстом «Привет! Это мой первый сайт»:
2. Мы хотим, чтобы текст стал другого цвета. Давайте сделаем его красным! Для этого используются каскадные стили (CSS), в данном случае достаточно для тега body прописать стиль «color: red;». В результате текстовый элемент преобразится, а информацию о его стилях мы можем посмотреть в инспекторе браузера:

view-source:https://timeweb.com/ru