Независимо от того, являетесь ли вы новичком в веб-индустрии или опытным ветераном, просмотр источника HTML на разных веб-страницах - это то, что вы, вероятно, будете делать много раз в течение своей карьеры.
Для тех, кто не знаком с веб-дизайном, просмотр исходного кода сайта является одним из самых простых способов увидеть, как определенные вещи выполняются, чтобы вы могли учиться на этой работе и начать использовать определенный код или методы в своей собственной работе. Как и любой веб-дизайнер, работающий сегодня, особенно те, кто был с ним с первых дней работы в отрасли, и это безопасно, что они расскажут вам, что они изучили HTML, просто просмотрев источник веб-страниц, которые они видели и были заинтригованы от. Помимо чтения книг по веб-дизайну или участия в профессиональных конференциях, просмотр исходного кода сайта - отличный способ для новичков выучить HTML.
Больше, чем просто HTML
Следует помнить, что исходные файлы могут быть очень сложными (и чем сложнее веб-сайт, который вы просматриваете, тем сложнее код этого сайта). Помимо структуры HTML, которая составляет страницу, которую вы просматриваете, также будут CSS (каскадные таблицы стилей), которые определяют внешний вид этого сайта. Кроме того, многие веб-сайты сегодня будут включать файлы сценариев, включенные вместе с HTML.
Вероятно, есть несколько файлов сценариев, на самом деле каждый из которых включает различные аспекты сайта. Честно говоря, исходный код сайта может показаться подавляющим, особенно если вы новичок в этом. Не расстраивайтесь, если вы не можете сразу понять, что происходит с этим сайтом. Просмотр источника HTML - это только первый шаг в этом процессе. Имея небольшой опыт, вы начнете лучше понимать, как все эти части подходят друг к другу, чтобы создать веб-сайт, который вы видите в своем браузере. По мере того, как вы познакомитесь с кодом, вы сможете узнать больше о нем, и вам это будет не так сложно.
Итак, как вы просматриваете исходный код веб-сайта? Ниже приведены пошаговые инструкции для этого с помощью браузера Google Chrome.
Пошаговые инструкции
-
Открой Веб-браузер Google Chrome (если у вас нет установленного Google Chrome, это бесплатная загрузка).
-
Перейдите к веб-страницу, которую вы хотели бы изучить.
-
Щелкните правой кнопкой мыши страница и посмотрите на появившееся меню. В этом меню нажмите Просмотр источника страницы.
-
Исходный код этой страницы теперь будет отображаться как новая вкладка в браузере.
-
Кроме того, вы также можете использовать сочетания клавиш CTRL + U на ПК, чтобы открыть окно с исходным кодом сайта. На Mac этот ярлык Command + Option + U.
Инструменты разработчика
В дополнение к простому Просмотр источника страницы которые Google Chrome предлагает, вы также можете воспользоваться превосходными инструментами для разработчиков, чтобы еще глубже погрузиться в сайт. Эти инструменты позволят вам не только увидеть HTML, но и CSS, который применяется к элементам просмотра в этом документе HTML.
Чтобы использовать инструменты разработчика Chrome:
-
открыто Гугл Хром.
-
Перейдите к веб-страницу, которую вы хотели бы изучить.
-
Нажмите значок с тремя строками в верхнем правом углу окна браузера.
-
Из меню наведите указатель мыши на Другие инструменты и нажмите Инструменты разработчика в появившемся меню.
-
Это откроет окно, которое показывает исходный код HTML слева от панели и соответствующий CSS справа.
-
Кроме того, если вы щелкните правой кнопкой мыши элемент на веб-странице и выберите Осмотреть в появившемся меню появятся инструменты разработчика Chrome, и выбранный вами элемент будет выделен в HTML с соответствующим CSS, показанным справа. Это очень полезно, если вы хотите узнать больше о том, как была создана одна конкретная часть сайта.
Является ли просмотр исходного кода законным?
На протяжении многих лет у нас появилось много новых веб-дизайнеров, вопрос о том, приемлемо ли просматривать исходный код сайта и использовать его для своего образования и, в конечном счете, для работы, которую они выполняют. Хотя копирование кода сайта и его передача на вашем сайте, безусловно, неприемлемы, использование этого кода в качестве трамплина для изучения - на самом деле, сколько продвижений сделано в этой отрасли.
Как мы уже упоминали в начале этой статьи, вам будет сложно найти рабочего веб-профессионала сегодня, который ничего не узнал, просмотрев источник сайта! Да, просмотр исходного кода сайта является законным. Использование этого кода в качестве ресурса для сборки чего-то подобного также прекрасное. Принимая код как есть и передавая его, так как ваша работа - это то, где вы начинаете сталкиваться с проблемами.
В конце концов, веб-профессионалы учатся друг у друга и часто улучшают работу, которую они видят и вдохновляют, поэтому не стесняйтесь просматривать исходный код сайта и использовать его в качестве учебного инструмента.
