![](https://prime-ltd.su/wp-content/uploads/2021/07/maik-jonietz-_yMciiStJyY-unsplash-scaled.jpg)
Работа элементов исходного кода напоминает исполнение солдатами команд, которые они получают от старшего по званию. При этом посторонний зритель этих команд не услышит, и для него все будет выглядеть так, словно солдаты сами слаженно действуют.
Для пользователя интернета таким отрядом солдат будет внешний вид сайта, на который он зашел, командиром — браузер, а вот команды, которые он подает, — это и есть исходный код.
Каждый сайт находится на своем сервере, откуда, в ответ на запрос пользователя, выводится нужная страница. Запросом может стать:
- введенный в адресную строку URL;
- переход по ссылке, созданной ранее кем-то другим;
- переход с использованием кнопки после заполнения формы.
При этом неважно, какой язык был использован при написании этой страницы, и была ли использована программная часть.
Какой бы результат пользователь ни получил от сервера, он всегда, состоит из текста и набора тегов html.
Таким кодом называют комплекс данных, которые состоят из:
- разметки html;
- таблицы стилей (вместо нее может применяться схема css, помещенная в единый файл);
- ссылок на файлы, содержащие код, а также программы, в основе которых JavaScript.
Это браузер превращает их в те красочные изображения, которые видит пользователь. Пока с ними работает сервер, они остаются просто текстом. В этом виде их и отправляют, когда нужно отреагировать на запрос.
Для чего нужно изучение исходного кода
Все, что составляет структуру страницы, можно проанализировать и в дальнейшем использовать, чтобы решить целый ряд задач. Например, без хорошего понимания исходного кода, не удастся оптимизировать сайт.
После его рассмотрения становится возможным:
- Выделить и проанализировать мета-теги.
- Определить, используются ли на сайте такие элементы как счетчики, коды идентификации, скрипты.
- Определить, как оформлялся тот или иной элемент, выяснить его основные параметры: размер, точный цвет.
- Отыскать на странице ссылки фотографий или других элементов.
- Изучить структуру ссылок.
- Определить, что мешает оптимизировать сайт. Это может быть стиль, не закрепленный в отдельном файле, скрипт, неточно написанный код.
Это только основные плюсы умения читать исходный код. На деле оно дает гораздо больше дополнительных возможностей.
Просмотр исходного кода
В браузере нет возможности увидеть его абсолютно таким, каким он размещен на сервере. Зато можно разобраться в разметке.
Чтобы это сделать, достаточно выполнить несколько несложных действий (все рассматривается на примере браузера Google Chrome):
![](https://prime-ltd.su/wp-content/uploads/2021/07/1.jpg)
- Щелкнуть правой кнопкой мыши.
- Выбрать пункт «Просмотреть код страницы».
![](https://prime-ltd.su/wp-content/uploads/2021/07/2.jpg)
После этого он развернется в новой вкладке. Выглядеть он будет как сплошной текст. Это требует еще дополнительных усилий, чтобы разобраться.
Интерактивный код более удобен в использовании, но для взаимодействия с ним потребуются инструменты разработчика.
Интерактивный код
Чтобы перейти к работе с ним, нужно:
- Кликнуть в браузере на «Меню». Обычно оно находится в правом верхнем углу и обозначено значком из трех точек или полосок.
![](https://prime-ltd.su/wp-content/uploads/2021/07/3.jpg)
- Перейти в раздел «Дополнительные инструменты».
- Выбрать пункт «Инструменты разработчика».
![](https://prime-ltd.su/wp-content/uploads/2021/07/4.jpg)
После этого на экране появится окно с активным кодом. Если нажать мышкой на один из элементов разметки, рядом высветится информация о стиле его оформления. На самой странице будет визуально выделен блок, который зависит от этого элемента.
![](https://prime-ltd.su/wp-content/uploads/2021/07/5.jpg)
Вкладка «Source» позволяет просматривать информацию отдельных файлов: скриптов, шрифтов или изображений.
![](https://prime-ltd.su/wp-content/uploads/2021/07/6-1.jpg)
Чтобы сохранить любой из них, достаточно кликнуть на нем правой кнопкой мышки и выбрать «Save».
![](https://prime-ltd.su/wp-content/uploads/2021/07/7.jpg)
Вкладка «Security» дает возможность проверить сертификат страницы.
![](https://prime-ltd.su/wp-content/uploads/2021/07/8.jpg)
Если то, как расположена панель, мешает полноценно работать со страницей, проблему можно решить, нажав на три точки. Там будут предложены другие варианты.
![](https://prime-ltd.su/wp-content/uploads/2021/07/10.jpg)
Просмотр и анализ мета-тегов
Любой документ, построенный на основе HTML, имеет в основе целый ряд тегов. Наиболее часто применяемые из них:
- html — так задается сам документ;
- head — показатель служебной информации;
- title — заголовок для пользователя (именно его браузер выводит как название вкладки);
- body — основная часть документа, его тело;
- H1-H6 — заголовки текста на странице, от самого крупного к самому маленькому;
- article — часть страницы, на которой размещена текстовая статья;
- section — обозначение для отдельного раздела;
- menu — элементы управления, меню;
- div — отдельный блок;
- span — отдельная строка;
- p — отдельный абзац;
- table — заявляет наличие на странице таблицы.
С помощью этих элементов информация на сайте не свалена в кучу, а аккуратно разделена, выделены логически важные места.
Практически все из них оформляют те части сайта, которые видит пользователь. Но тег head выделяется среди остальных: он служит для передачи служебной информации с помощью мета-тегов. С этим работает уже не пользователь или браузер, а непосредственно сервер и боты поисковиков. Никак иначе узнать, что там записано, невозможно.
![](https://prime-ltd.su/wp-content/uploads/2021/07/11.jpg)
Особое внимание стоит уделить тегу link. Он позволяет присоединить ссылку на сторонний файл, так что его можно просмотреть и даже скачать. Для этого достаточно кликнуть по ссылке правой кнопкой мышки и выбрать «Open in new Tab».
![](https://prime-ltd.su/wp-content/uploads/2021/07/12.jpg)
Нужный файл появится в отдельной вкладке и будет доступен для чтения и скачивания.
Просмотр исходного кода до начала отладки скрипта
Лучше всего использовать для его открытия локальную машину. Простые исправления в стилях, разметке или скриптах удобно проводить непосредственно из папки. Точно так же легко просмотреть и код HTML.
Сложнее с ошибками, возникающими в коде JavaScript. Их видно только в разделе «Console», где выводится информация об ошибке и ее строка. Во вкладке «Source» отмечаются синтаксические ошибки.
Просмотр кода отдельного фрагмента
Если на странице много элементов, часто трудно отыскать часть, которая относится к определенному из них. На этот случай создана специальная команда.
Нужно кликнуть на нужный фрагмент правой кнопкой мышки и нажать на «Просмотреть код».
![](https://prime-ltd.su/wp-content/uploads/2021/07/15.jpg)
В открывшемся окне нужный объект будет выделен в общей массе.
![](https://prime-ltd.su/wp-content/uploads/2021/07/16.jpg)
![](https://prime-ltd.su/wp-content/uploads/2021/07/14.jpg)
Базовых знаний в области HTML достаточно, чтобы гораздо лучше справляться с собственными документами. Не стоит забывать и учиться на примере чужих страниц.