У каждой страницы сайта есть исходный код. Фактически это программа, которая представляет собой набор команд. Они отвечают за отображение содержимого, которое мы видим на сайте. Исходный код содержит информацию обо всех элементах страницы. Мы расскажем, как его посмотреть и для чего это можно делать.
Посмотреть исходный код страницы можно в любом браузере. Различаются только команды.
В большинстве браузеров можно щелкнуть правой кнопкой мыши и нажать на «Просмотр кода страницы». Альтернатива — воспользоваться горячими клавишами Windows «CTRL+U».
На MacOS действует другой набор. Здесь, чтобы посмотреть исходный код, придется нажать «Option + Command + U».
Более удобный способ — воспользоваться консолью разработчика. Ее можно вызвать командой «Ctrl + Shift + I» . В консоли исходный код страницы изображен в более удобном виде, позволяющем посмотреть иерархию элементов. Для этого нужно перейти во вкладку «Elements».
Мобильные версии браузеров имеют гораздо меньше возможностей. Но посмотреть в них исходный код сайтов все же можно. Самый простой способ — добавить в адресную строку перед названием «view-source:». Например, чтобы получилось «view-source: ru.hexlet.io».
Также для Android есть специальные приложения, которые позволяют работать с исходным кодом страницы. Например, VT View Source.
В коде страницы можно увидеть структуру тэгов. Он написан на языке разметки — HTML с использованием каскадных таблиц стилей — CSS. Также в нем можно увидеть скрипты, написанные на языке программирования JavaScript. Они отвечают за динамические элементы.
Смотреть код страницы нужно тем, кто хочет научиться работать с фронтендом или интерфейсом сайтов. Хотя и бэкендерам нужно в общих чертах знать, как он функционирует.
Большинство сотрудников сферы IT умеют читать этот код, поэтому всем, кто планирует там работать, приходится этому научиться.
Но чтение — это далеко не все возможности. Исходный код сайта можно редактировать, проверять на ошибки и узнавать важную информацию.
Фактически это нужно делать всем, кто работает над созданием и продвижением сайтов. Кто может читать код страницы:
Код страницы состоит из тэгов, которые с первого взгляда кажутся совсем непонятными. Но на самом деле, научиться их распознавать несложно. Для этого потребуется выучить основы HTML и CSS.
Именно они отвечают за отображение страницы. Рассказываем подробнее.
HTML (HyperText Markup Language) — язык разметки, который применяют для создания структуры и содержимого веб-страниц. Он не является языком программирования, а, скорее, набором правил и команд, которые понимает браузер.
Он интерпретирует их, а затем отображает содержание страницы и все ее элементы.
Основа HTML — тэги. Это своеобразные кирпичики, которые применяют для того, чтобы построить страницу. В нее входят ссылки, изображения, таблицы, тексты и все остальное, что посетитель видит на сайте.
Каждая страница — документ, и у него есть своя структура. Фактически он состоит из трех разделов:
В HTML есть популярные тэги, которые можно встретить буквально в любом документе. Большинство из них закрывающиеся, то есть ими оборачивают ту или иную информацию. Они имеют открывающий и закрывающий элемент.
Вот некоторые из них:
— отмечает абзацы в тексте;
На самом деле тэгов гораздо больше, мы рассказали только о самых распространенных.
Каскадные таблицы стилей (CSS) — язык, который используют для описания внешнего вида веб-страниц. Он позволяет IT-специалистам управлять различными аспектами отображения сайта.
Например, при помощи CSS можно задавать шрифты, цвета, размер и многое другое, применительно ко всей странице. Некоторые функции CSS доступны и через HTML, но это будет дольше и неудобнее.
В нулевые годы сайты делались на «чистом» HTML и напоминали таблицы: в них было мало цвета, не было ярких кнопок, а в целом они выглядели как сугубо утилитарный продукт.
С начала использования CSS у сайтов улучшилось юзабилити, то есть они стали гораздо удобнее для пользователей.
Основа CSS — это правила, которые можно применять к тем или иным элементам на странице. В исходном коде они прописывают внешний вид. Применение правил возможно как к отдельному элементу, так и к странице или всему сайту разом.
Браузер умеет «читать» CSS и проводить процесс рендеринга, то есть он преобразует исходный код в визуальное представление страницы. А пользователь получает красочный интерфейс сайта.
CSS состоит из набора правил. У каждого из них есть селектор и блок деклараций. Задача селектора — указать, к какому элементу мы применяем правила. А блок деклараций, в свою очередь, состоит из свойства и значения. Например, свойство фона — цвет, а значение — белый или красный.
h1 {
color: red;
}
Вот так, например, можно сделать красным цвет текста в заголовке h1 на сайте.
При использовании CSS важен принцип каскадности. Более конкретизированное правило имеет приоритет.
CSS использует концепцию каскадности для определения того, какие правила применяются к конкретному элементу. Каскадность означает, что если несколько правил применимы к одному и тому же элементу, то применяется самое конкретное правило.
Также важно и наследование, которое предполагает, что дочерние элементы наследуют свойства родительских. Это дает возможность подключать общие стили для всей страницы.
Так CSS используют для установки единых элементов анимации, шрифтов и размеров текста, его цвета, а также цвета заголовков и фона.
В исходном коде страницы есть много элементов. Некоторые из них отвечают за важнейшие параметры для поисковой оптимизации и критически важны для существования сайта.
Это один из важнейших тэгов, который открывается в исходном коде. Он служит для прописывания заголовка страницы. Его содержимое оборачивают в тэг
Этот элемент необходим для того, чтобы пользователи видели заголовок страницы. Обычно он отображается в верхней части открытой вкладки браузера.
Когда поисковая машина ищет подходящие страницы, то ориентируется во многом на этот параметр. В поисковой выдаче мы также будет видеть title страниц.
Этот тэг исходного кода отвечает за описание страницы. Обычно в нем содержится не более 160 символов. Когда вы вводите поисковый запрос, то получаете выдачу из разных страниц сайтов.
У каждого есть заголовок — title, и описание. Туда и идет текст из description. Это своеобразная аннотация, которая позволяет пользователям понять, что находится на странице.
На основе description и люди, и поисковые машины судят о содержимом сайта. Чем лучше он отвечает на их запрос, тем больше вероятности, что страницу откроют.
Заголовки необходимы для структурирования текста — с ними его банально проще читать. Но не только для этого необходимо размечать их тэгами в исходном коде странице.
Прежде всего, они позволяют поисковым машинам правильно анализировать содержимое страницы. При помощи этих тэгов они понимают, о чем идет речь и насколько контент соответствует поисковым запросам.
Изначально этот тэг имел важное значение во времена медленного интернета. Его содержимое в исходном коде должно было описывать текстом, что нарисовано на картинке.
Если страница грузилась медленно, то пользователь видел текст. Сейчас его по-прежнему используют для поискового продвижения.
Большинство начинающих IT-специалистов используют исходный код страницы просто для чтения, чтобы понимать, как расположены те или иные элементы сайта. Но это далеко не все его функции.
Любой пользователь может отредактировать код страницы в своем браузере. Это никак не связано с самим сайтом: изменения будут локальными и сохранятся только у вас на компьютере. Чтобы увидеть исходный код, потребуется перезагрузить страницу и тогда все снова станет как было.
Для редактирования нужно открыть консоль разработчика. Это делают командой горячих клавиш «Ctrl + Shift + I». А затем необходимо перейти во вкладку «Elements».
Там вы увидите исходный код страницы. Выделите любой элемент на ней мышкой, щелкните правой клавишей и нажмите «Edit».
Так пользователь получает возможность редактировать исходный код. Все внесенные изменения появятся на странице в режиме реального времени.
Иногда нужное изображение не скачивается привычным нам способом. В таком случае можно прибегнуть к исходному коду страницы.
Для этого необходимо открыть консоль разработчика, перейти во вкладку «Elements», а в коде найти тэг «img». Там будет размещена ссылка на изображение.
Ее нужно скопировать и открыть в другой вкладке, а затем — сохранить.
Теперь вы знаете, как посмотреть исходный код страницы сайта в декстопном и мобильном браузере. Проще всего сделать это через консоль разработчика. Ее можно вызвать комбинаций клавиш — «Ctrl + Shift + I» на Windows, либо «Option + Command + I» на macOS.
Так вы сможете увидеть все элементы, размещенные на странице. А именно, тэги HTML и каскадные таблицы стилей CSS. По ним можно судить о содержимом страницы.