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

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

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

Просмотреть исходный код в Chrome

Итак, как вы просматриваете исходный код веб-сайта? Вот пошаговые инструкции, как это сделать с помощью браузера Google Chrome.

Открыть Веб-браузер Google Chrome (если у вас не установлен Google Chrome, это бесплатная загрузка).
Перейдите к веб-страница, которую вы хотели бы изучить.
Щелкните правой кнопкой мыши страница и посмотрите на появившееся меню. В этом меню щелкните Просмотр источника страницы.
Исходный код для этой страницы теперь появится в новой вкладке в браузере.
Кроме того, вы также можете использовать сочетания клавиш CTRL + U на ПК, чтобы открыть окно с исходным кодом сайта. На Mac этот ярлык Command + Option + U.

Используйте инструменты разработчика Chrome

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

Чтобы использовать инструменты разработчика Chrome:

Депозит Google Chrome.
Перейдите к веб-страницу, которую вы хотели бы изучить.
Выберите трехточечное меню в правом верхнем углу окна браузера.
В меню наведите указатель мыши на Дополнительные инструменты и затем выберите Инструменты разработчика в появившемся меню.
Откроется окно с исходным кодом HTML в левой части панели и соответствующим CSS справа.
В качестве альтернативы, если вы щелкните правой кнопкой мыши элемент на веб-странице и выберите Инспектировать в появившемся меню всплывают инструменты разработчика Chrome и выделяют конкретную часть, которую вы выбрали в HTML, с соответствующим CSS, показанным справа. Это очень полезно, если вы хотите узнать больше об определенной части сайта.

Законен ли просмотр исходного кода?

За прошедшие годы у нас было много новых веб-дизайнеров, которые задавались вопросом, допустимо ли просматривать исходный код сайта и использовать его для обучения и, в конечном итоге, для работы, которую они делают. Хотя массовое копирование кода сайта и выдача его за свой собственный на веб-сайте, безусловно, неприемлемо, использование этого кода в качестве трамплина для обучения — вот сколько успехов было сделано в этой отрасли.

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

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

Больше, чем просто HTML

Следует помнить, что исходные файлы могут быть очень сложными (и чем сложнее просматриваемый веб-сайт, тем более сложным может быть код этого сайта). В дополнение к структуре HTML, из которой состоит страница, будут также CSS (каскадные таблицы стилей), которые определяют внешний вид этого сайта. Кроме того, многие веб-сайты сегодня будут включать файлы сценариев, включенные вместе с HTML.

Вероятно, будет включено несколько файлов сценариев; Фактически, каждый из них поддерживает разные аспекты сайта. Честно говоря, исходный код сайта может показаться огромным, особенно если вы новичок в этом. Не расстраивайтесь, если вы не можете сразу понять, что происходит с этим сайтом. Просмотр исходного кода HTML — это только первый шаг в этом процессе. Имея небольшой опыт, вы начнете лучше понимать, как все эти части сочетаются друг с другом для создания веб-сайта, который вы видите в своем браузере. По мере того, как вы ближе познакомитесь с кодом, вы сможете узнать из него больше, и он не будет казаться вам таким сложным.