У каждой страницы сайта есть исходный код. Фактически это программа, которая представляет собой набор команд. Они отвечают за отображение содержимого, которое мы видим на сайте. Исходный код содержит информацию обо всех элементах страницы. Мы расскажем, как его посмотреть и для чего это можно делать.
Как открыть код страницы в браузере
Посмотреть исходный код страницы можно в любом браузере. Различаются только команды.
В большинстве браузеров можно щелкнуть правой кнопкой мыши и нажать на «Просмотр кода страницы». Альтернатива — воспользоваться горячими клавишами 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. Чтение кода сайта позволяет понять, как правильно верстать фронтенд и как он работает на практике;
- Тестировщики. Эти специалисты занимаются проверкой сайтов на работоспособность. Они должны убедиться, что приложение функционирует корректно и в соответствии с документацией. А в этом деле не обойтись без чтения кода страница;
- Веб-дизайнеры. Их задача — нарисовать макет будущего сайта, но у хорошего специалиста этим дело не ограничивается. Дизайнер должен понимать, как будут располагаться элементы при верстке, а для этого придется заглянуть в код страницы;
- СЕО-специалисты. Они отвечают за продвижение сайтов. Многие элементы, необходимые для СЕО-продвижения, прописывают в коде. Например, это тэги «description» и «title», которые отвечают за описание и заголовок страницы. Их проще всего посмотреть в коде сайта;
- Маркетологи. Эти специалисты могут проводить ревизию сайта и его конкурентов, чтобы понимать, насколько быстро загружаются страницы, хорошо ли отображаются элементы и т.д.
Как читать код
Код страницы состоит из тэгов, которые с первого взгляда кажутся совсем непонятными. Но на самом деле, научиться их распознавать несложно. Для этого потребуется выучить основы HTML и CSS.
Именно они отвечают за отображение страницы. Рассказываем подробнее.
Что такое HTML
HTML (HyperText Markup Language) — язык разметки, который применяют для создания структуры и содержимого веб-страниц. Он не является языком программирования, а, скорее, набором правил и команд, которые понимает браузер.
Он интерпретирует их, а затем отображает содержание страницы и все ее элементы.
Основа HTML — тэги. Это своеобразные кирпичики, которые применяют для того, чтобы построить страницу. В нее входят ссылки, изображения, таблицы, тексты и все остальное, что посетитель видит на сайте.
Каждая страница — документ, и у него есть своя структура. Фактически он состоит из трех разделов:
- Заголовок (head). В него входят метаданные и ссылки на внешние ресурсы, такие как стили CSS и JavaScript. О них мы поговорим позже;
- Тело (body). Основная часть документа. В нем размещают видимое содержимое страницы. Например, текст, изображения, таблицы и формы;
- Футер (footer). Обычно содержит дополнительную информацию, например, авторские права и ссылки на связанные страницы.
В HTML есть популярные тэги, которые можно встретить буквально в любом документе. Большинство из них закрывающиеся, то есть ими оборачивают ту или иную информацию. Они имеют открывающий и закрывающий элемент.
Вот некоторые из них:
- — этот тэг определяет начало и конец документа;
- — в него оборачивают видимое содержимое страницы;
— отмечает абзацы в тексте;
- и
- — отвечают за нумерованные и ненумерованные списки;
- — в него оборачивают гиперссылку, а атрибут «href» указывает ее адрес;
— отвечает за добавление картинок, а «src» указывает путь к изображению.
На самом деле тэгов гораздо больше, мы рассказали только о самых распространенных.
Что такое CSS
Каскадные таблицы стилей (CSS) — язык, который используют для описания внешнего вида веб-страниц. Он позволяет IT-специалистам управлять различными аспектами отображения сайта.
Например, при помощи CSS можно задавать шрифты, цвета, размер и многое другое, применительно ко всей странице. Некоторые функции CSS доступны и через HTML, но это будет дольше и неудобнее.
В нулевые годы сайты делались на «чистом» HTML и напоминали таблицы: в них было мало цвета, не было ярких кнопок, а в целом они выглядели как сугубо утилитарный продукт.
С начала использования CSS у сайтов улучшилось юзабилити, то есть они стали гораздо удобнее для пользователей.
Основа CSS — это правила, которые можно применять к тем или иным элементам на странице. В исходном коде они прописывают внешний вид. Применение правил возможно как к отдельному элементу, так и к странице или всему сайту разом.
Браузер умеет «читать» CSS и проводить процесс рендеринга, то есть он преобразует исходный код в визуальное представление страницы. А пользователь получает красочный интерфейс сайта.
CSS состоит из набора правил. У каждого из них есть селектор и блок деклараций. Задача селектора — указать, к какому элементу мы применяем правила. А блок деклараций, в свою очередь, состоит из свойства и значения. Например, свойство фона — цвет, а значение — белый или красный.
h1 {
color: red;
}
Вот так, например, можно сделать красным цвет текста в заголовке h1 на сайте.
При использовании CSS важен принцип каскадности. Более конкретизированное правило имеет приоритет.
CSS использует концепцию каскадности для определения того, какие правила применяются к конкретному элементу. Каскадность означает, что если несколько правил применимы к одному и тому же элементу, то применяется самое конкретное правило.
Также важно и наследование, которое предполагает, что дочерние элементы наследуют свойства родительских. Это дает возможность подключать общие стили для всей страницы.
Так CSS используют для установки единых элементов анимации, шрифтов и размеров текста, его цвета, а также цвета заголовков и фона.
На что обратить внимание в коде страницы
В исходном коде страницы есть много элементов. Некоторые из них отвечают за важнейшие параметры для поисковой оптимизации и критически важны для существования сайта.
Заголовок страницы title
Это один из важнейших тэгов, который открывается в исходном коде. Он служит для прописывания заголовка страницы. Его содержимое оборачивают в тэг
Этот элемент необходим для того, чтобы пользователи видели заголовок страницы. Обычно он отображается в верхней части открытой вкладки браузера.
Когда поисковая машина ищет подходящие страницы, то ориентируется во многом на этот параметр. В поисковой выдаче мы также будет видеть title страниц.
Мета-описание description
Этот тэг исходного кода отвечает за описание страницы. Обычно в нем содержится не более 160 символов. Когда вы вводите поисковый запрос, то получаете выдачу из разных страниц сайтов.
У каждого есть заголовок — title, и описание. Туда и идет текст из description. Это своеобразная аннотация, которая позволяет пользователям понять, что находится на странице.
На основе description и люди, и поисковые машины судят о содержимом сайта. Чем лучше он отвечает на их запрос, тем больше вероятности, что страницу откроют.
Заголовки Н1–Н6
Заголовки необходимы для структурирования текста — с ними его банально проще читать. Но не только для этого необходимо размечать их тэгами в исходном коде странице.
Прежде всего, они позволяют поисковым машинам правильно анализировать содержимое страницы. При помощи этих тэгов они понимают, о чем идет речь и насколько контент соответствует поисковым запросам.
Альтернативный текст изображений alt
Изначально этот тэг имел важное значение во времена медленного интернета. Его содержимое в исходном коде должно было описывать текстом, что нарисовано на картинке.
Если страница грузилась медленно, то пользователь видел текст. Сейчас его по-прежнему используют для поискового продвижения.
Как использовать код
Большинство начинающих IT-специалистов используют исходный код страницы просто для чтения, чтобы понимать, как расположены те или иные элементы сайта. Но это далеко не все его функции.
Редактировать контент
Любой пользователь может отредактировать код страницы в своем браузере. Это никак не связано с самим сайтом: изменения будут локальными и сохранятся только у вас на компьютере. Чтобы увидеть исходный код, потребуется перезагрузить страницу и тогда все снова станет как было.
Для редактирования нужно открыть консоль разработчика. Это делают командой горячих клавиш «Ctrl + Shift + I». А затем необходимо перейти во вкладку «Elements».
Там вы увидите исходный код страницы. Выделите любой элемент на ней мышкой, щелкните правой клавишей и нажмите «Edit».
Так пользователь получает возможность редактировать исходный код. Все внесенные изменения появятся на странице в режиме реального времени.
Скачивать картинки
Иногда нужное изображение не скачивается привычным нам способом. В таком случае можно прибегнуть к исходному коду страницы.
Для этого необходимо открыть консоль разработчика, перейти во вкладку «Elements», а в коде найти тэг «img». Там будет размещена ссылка на изображение.
Ее нужно скопировать и открыть в другой вкладке, а затем — сохранить.
Заключение
Теперь вы знаете, как посмотреть исходный код страницы сайта в декстопном и мобильном браузере. Проще всего сделать это через консоль разработчика. Ее можно вызвать комбинаций клавиш — «Ctrl + Shift + I» на Windows, либо «Option + Command + I» на macOS.
Так вы сможете увидеть все элементы, размещенные на странице. А именно, тэги HTML и каскадные таблицы стилей CSS. По ним можно судить о содержимом страницы.
