Як праглядзець HTML-код у Google Chrome

Даведайцеся, як вэб-сайт быў пабудаваны прагледзеўшы зыходны код

Калі я ўпершыню пачаў сваю кар'еру ў якасці вэб-дызайнера, я даведаўся так шмат, разглядаючы працу іншых вэб-дызайнераў, якіх я захапляўся. Я не самотны ў гэтым. Калі вы пачатковец у вэб - індустрыі або дасведчаны ветэран, таго, хто глядзіць на крыніцу HTML розных вэб - старонак з'яўляецца тое , што вы, верагодна, зрабіць шмат разоў на працягу сваёй кар'еры.

Для тых, хто пачатковец у вэб-дызайне, прагляду крыніцы кода сайта з'яўляецца адным з самых простых спосабаў, каб убачыць, як некаторыя рэчы зробленыя так, што вы можаце даведацца з гэтай працы і пачаць выкарыстоўваць пэўны код або метады ў сваёй працы. Як і любы вэб-дызайнер, які працуе сёння, асабліва тыя, хто быў у ёй з першых дзён галіны, і гэта бяспечна трымаць заклад, што яны з вам сказаць, што яны даведаліся HTML проста пры праглядзе зыходнага кода вэб-старонак, якія яны бачылі і былі заінтрыгаваныя па. Акрамя чытання вэб - дызайну кнігі або наведваць прафесійныя канферэнцыі , прагляд зыходнага кода сайта з'яўляецца выдатным спосабам для пачаткоўцаў вывучаць HTML.

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

Адна рэч , каб памятаць пра тое , што зыходныя файлы могуць быць вельмі складанымі (і больш складаны сайт вы чытаеце гэта, код больш складаным , што сайта, верагодна, будзе). У дадатак да HTML структуры , якая складае прагляданую старонку, там будзе таксама CSS (каскадныя табліцы стыляў) , якія дыктуюць знешні выгляд гэтага сайта. Акрамя таго, многія сайты будуць уключаць у сябе файлы сцэнарыяў ўключаны разам з HTML.

Існуе, верагодна, будзе некалькі файлаў сцэнарыяў ўключаны, па сутнасці, кожны з харчавання розных аспектаў сайта. Шчыра кажучы, зыходны код сайта можа здацца вялізным, асабліва калі вы пачатковец у гэтым. Не хвалюйцеся, калі вы не можаце зразумець, што адбываецца з гэтым сайтам адразу. Прагляд крыніцы HTML з'яўляецца толькі першым крокам у гэтым працэсе. З невялікім вопытам, вы пачнеце лепш разумець, як усе гэтыя часткі злучаюцца разам, каб стварыць сайт, які вы бачыце ў вашым браўзэры. Як вы больш знаёмыя з кодам, вы зможаце больш даведацца ад яго, і ён, здаецца, не будзе рабіць складаным для вас.

Так як жа прагледзець зыходны код вэб-сайта? Вось інструкцыі, крок за крокам, каб зрабіць гэта з дапамогай браўзэра Google Chrome.

Крок за крокам інструкцыі

  1. Адкрыйце вэб - браўзэр Google Chrome (калі не ўсталяваны Google Chrome, гэта бясплатна).
  2. Перайдзіце на вэб - старонцы вы хацелі б вывучыць.
  3. Пстрыкніце правай кнопкай мышы старонку і паглядзець на меню. З дапамогай гэтага меню абярыце Прагляд зыходнага кода старонкі.
  4. Зыходны код для гэтай старонкі цяпер з'явіцца ў выглядзе новай укладкі ў браўзэры.
  5. Акрамя таго , вы таксама можаце выкарыстоўваць спалучэнне клавіш па CTRL + U на ПК , каб адкрыць акно з зыходным кодам сайта адлюстроўваецца. На Mac, гэта спалучэнне клавіш Ctrl + Alt + U.

інструменты распрацоўніка

У дадатку да простай Паглядзець старонку здольнасці крыніцы, Google Chrome прапануе, вы таксама можаце скарыстацца іх выдатнымі прыладамі распрацоўніка капаць яшчэ глыбей у сайт. Гэтыя прылады дазволяць вам не толькі ўбачыць HTML, але і CSS, які ўжываецца для прагляду элементаў у гэтым HTML-дакуменце.

Каб выкарыстоўваць інструменты распрацоўніка Chrome:

  1. Адкрыйце Google Chrome.
  2. Перайдзіце на вэб - старонцы вы хацелі б вывучыць.
  3. Націсніце на значок з трыма лініямі ў правым верхнім куце акна браўзэра.
  4. У меню, навядзіце курсор на Дадатковыя прылады , а затым націсніце Інструменты распрацоўніка ў меню , якое з'яўляецца.
  5. Адкрыецца акно, у якім паказаць зыходны HTML-код на левай панэлі і звязанай з ім CSS справа.
  6. З іншага боку , калі вы пстрыкніце правай кнопкай мышы элемент на вэб - старонцы і абярыце Прагляд з меню , якое з'яўляецца, інструменты для распрацоўшчыкаў Chrome, з'явіцца і дакладны элемент , які вы абралі , будзе выдзелены ў HTML з адпаведным CSS , паказанай справа. Гэта супер карысна, калі вы хочаце даведацца больш аб тым, як быў выбудаваны адзін канкрэтны кавалак сайта.

З'яўляецца Прагляд зыходнага кода Legal?

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

Як я ўжо згадваў у пачатку гэтага артыкула, вы б цяжка знайсці рабочую сетку прафесіянала сёння, хто не даведаўся нешта, праглядаючы крыніца пэўнага сайта! Так, прагляд зыходнага кода сайта з'яўляецца законным. З дапамогай гэтага кода ў якасці рэсурсу, каб пабудаваць нешта падобнае таксама добра. Прымаючы код, як ёсць, і перадаючы яго, як ваша праца, дзе вы пачынаеце сутыкацца з праблемамі.

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