
Работа элементов исходного кода напоминает исполнение солдатами команд, которые они получают от старшего по званию. При этом посторонний зритель этих команд не услышит, и для него все будет выглядеть так, словно солдаты сами слаженно действуют.
Для пользователя интернета таким отрядом солдат будет внешний вид сайта, на который он зашел, командиром — браузер, а вот команды, которые он подает, — это и есть исходный код.
Каждый сайт находится на своем сервере, откуда, в ответ на запрос пользователя, выводится нужная страница. Запросом может стать:
- введенный в адресную строку URL;
- переход по ссылке, созданной ранее кем-то другим;
- переход с использованием кнопки после заполнения формы.
При этом неважно, какой язык был использован при написании этой страницы, и была ли использована программная часть.
Какой бы результат пользователь ни получил от сервера, он всегда, состоит из текста и набора тегов html.
Таким кодом называют комплекс данных, которые состоят из:
- разметки html;
- таблицы стилей (вместо нее может применяться схема css, помещенная в единый файл);
- ссылок на файлы, содержащие код, а также программы, в основе которых JavaScript.
Это браузер превращает их в те красочные изображения, которые видит пользователь. Пока с ними работает сервер, они остаются просто текстом. В этом виде их и отправляют, когда нужно отреагировать на запрос.
Для чего нужно изучение исходного кода
Все, что составляет структуру страницы, можно проанализировать и в дальнейшем использовать, чтобы решить целый ряд задач. Например, без хорошего понимания исходного кода, не удастся оптимизировать сайт.
После его рассмотрения становится возможным:
- Выделить и проанализировать мета-теги.
- Определить, используются ли на сайте такие элементы как счетчики, коды идентификации, скрипты.
- Определить, как оформлялся тот или иной элемент, выяснить его основные параметры: размер, точный цвет.
- Отыскать на странице ссылки фотографий или других элементов.
- Изучить структуру ссылок.
- Определить, что мешает оптимизировать сайт. Это может быть стиль, не закрепленный в отдельном файле, скрипт, неточно написанный код.
Это только основные плюсы умения читать исходный код. На деле оно дает гораздо больше дополнительных возможностей.
Просмотр исходного кода
В браузере нет возможности увидеть его абсолютно таким, каким он размещен на сервере. Зато можно разобраться в разметке.
Чтобы это сделать, достаточно выполнить несколько несложных действий (все рассматривается на примере браузера Google Chrome):

- Щелкнуть правой кнопкой мыши.
- Выбрать пункт «Просмотреть код страницы».

После этого он развернется в новой вкладке. Выглядеть он будет как сплошной текст. Это требует еще дополнительных усилий, чтобы разобраться.
Интерактивный код более удобен в использовании, но для взаимодействия с ним потребуются инструменты разработчика.
Интерактивный код
Чтобы перейти к работе с ним, нужно:
- Кликнуть в браузере на «Меню». Обычно оно находится в правом верхнем углу и обозначено значком из трех точек или полосок.

- Перейти в раздел «Дополнительные инструменты».
- Выбрать пункт «Инструменты разработчика».

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

Вкладка «Source» позволяет просматривать информацию отдельных файлов: скриптов, шрифтов или изображений.

Чтобы сохранить любой из них, достаточно кликнуть на нем правой кнопкой мышки и выбрать «Save».

Вкладка «Security» дает возможность проверить сертификат страницы.

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

Просмотр и анализ мета-тегов
Любой документ, построенный на основе HTML, имеет в основе целый ряд тегов. Наиболее часто применяемые из них:
- html — так задается сам документ;
- head — показатель служебной информации;
- title — заголовок для пользователя (именно его браузер выводит как название вкладки);
- body — основная часть документа, его тело;
- H1-H6 — заголовки текста на странице, от самого крупного к самому маленькому;
- article — часть страницы, на которой размещена текстовая статья;
- section — обозначение для отдельного раздела;
- menu — элементы управления, меню;
- div — отдельный блок;
- span — отдельная строка;
- p — отдельный абзац;
- table — заявляет наличие на странице таблицы.
С помощью этих элементов информация на сайте не свалена в кучу, а аккуратно разделена, выделены логически важные места.
Практически все из них оформляют те части сайта, которые видит пользователь. Но тег head выделяется среди остальных: он служит для передачи служебной информации с помощью мета-тегов. С этим работает уже не пользователь или браузер, а непосредственно сервер и боты поисковиков. Никак иначе узнать, что там записано, невозможно.

Особое внимание стоит уделить тегу link. Он позволяет присоединить ссылку на сторонний файл, так что его можно просмотреть и даже скачать. Для этого достаточно кликнуть по ссылке правой кнопкой мышки и выбрать «Open in new Tab».

Нужный файл появится в отдельной вкладке и будет доступен для чтения и скачивания.
Просмотр исходного кода до начала отладки скрипта
Лучше всего использовать для его открытия локальную машину. Простые исправления в стилях, разметке или скриптах удобно проводить непосредственно из папки. Точно так же легко просмотреть и код HTML.
Сложнее с ошибками, возникающими в коде JavaScript. Их видно только в разделе «Console», где выводится информация об ошибке и ее строка. Во вкладке «Source» отмечаются синтаксические ошибки.
Просмотр кода отдельного фрагмента
Если на странице много элементов, часто трудно отыскать часть, которая относится к определенному из них. На этот случай создана специальная команда.
Нужно кликнуть на нужный фрагмент правой кнопкой мышки и нажать на «Просмотреть код».

В открывшемся окне нужный объект будет выделен в общей массе.


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