Google Chrome-da HTML mənbəyini necə görmək

Bir veb saytın mənbə kodunu görüntüləyərək necə qurulduğunu öyrənin

Mənim ilk karyeramızı bir veb-dizayner kimi başladığımda, mən çox sevdim digər veb-dizaynerlərin işini nəzərdən keçirərək öyrəndim. Mən bu mövzuda tək deyiləm. Veb sənayesinə və ya təcrübəli veteranlara yeni olan olsun, müxtəlif veb səhifələrin HTML mənbəyini görüntüləyərək, karyeranızın gedişatı boyunca bir çox dəfə olma ehtimalı olan bir şeydir.

Veb dizaynı olanlar üçün, saytın mənbə kodunu görüntüləyənlər, bu işdən öyrənə və öz işində müəyyən kodları və ya üsulları istifadə etməyə başlaya biləcək şəkildə müəyyən işlər görüləcək ən asan yollardan biridir. Bu gün işləyən hər hansı bir veb-dizayner kimi, xüsusilə sənayenin ilk günlərindən bəri baş verənlər və təhlükəsiz bir bahisdirlər ki, onlar HTML-lərini sadəcə olaraq gördükləri və maraqlandığı veb-səhifələrin mənbəyini görüntüləyərək öyrəndilər tərəfindən. Veb dizayn kitablarını oxumaq və ya peşəkar konfranslarda iştirak etməklə yanaşı, bir saytın mənbə kodunu görüntüləmək, yeni başlayanlar HTML öyrənmək üçün böyük bir yoldur.

Yalnız HTML-dən daha çox

Xatırladaq ki, mənbə faylları çox mürəkkəb ola bilər (və baxdığınız veb daha mürəkkəbdir, sitenin kodunun daha mürəkkəb olması ehtimalı). Baxdığınız səhifəni təşkil edən HTML strukturuna əlavə olaraq, həmin saytın vizual görünüşünü diktə edən CSS (cascading stil vərəqləri) də olacaq. Bundan əlavə, bir çox veb-sayt bu gün HTML ilə birlikdə olan script fayllarını ehtiva edəcək.

Çox script faylları olma ehtimalı var, əslində, hər biri saytın müxtəlif aspektlərini gücləndirir. Şübhəsiz ki, bir saytın mənbə kodu, xüsusilə də bunu etmək üçün yeni bir şey ola bilər. Dərhal həmin saytla nə baş verdiyini anlaya bilməyəcəksinizsə, əsəbiləşməyin. HTML mənbəyinin görüntülenmesi bu prosesin ilk addımıdır. Bir az təcrübə ilə bütün brauzerinizdə gördüyünüz veb saytı yaratmaq üçün bu ədədlərin hamısına necə uyğun olduğunu başa düşməyə başlayacaqsınız. Kodla daha yaxından tanış olduğunuzdan daha çox məlumat əldə edə biləcəksiniz və bu sizin üçün çox təəccüblü görünməyəcəkdir.

Beləliklə, veb saytın qaynaq kodunu necə görürsünüz? Google Chrome brauzeri istifadə edərək bunu etmək üçün addım-addım təlimatlar.

Addım Təlimatları

  1. Google Chrome veb brauzerini açın (Google Chrome quraşdırılmış deyilsə, bu pulsuz yükləməsidir).
  2. İnkişaf etmək istədiyiniz veb səhifəyə gedin.
  3. Sayfayı sağ tıklatın ve görünen menüye baxın. Bu menyudan, Baxma səhifəsinə baxın .
  4. Bu səhifə üçün mənbə kodu brauzerdə yeni bir sekmə olaraq görünür.
  5. Alternativ olaraq, bir CTRL + U klaviatura qısa yollarını bir saytın göstərilən kodu ilə bir pəncərə açmaq üçün PC-də istifadə edə bilərsiniz. Mac'te bu kısayol Command + Alt + U'dır .

Developer Tools

Google Chrome'un təqdim etdiyi sadə View səhifə qaynaq qabiliyyətinə əlavə, bir site daha da dərinləşdirmək üçün mükəmməl Developer Tools istifadə edə bilərsiniz. Bu alətlər yalnız HTML-ni görməklə yanaşı HTML sənədində elementləri görmək üçün tətbiq olunan CSS-ni də görməyə imkan verir.

Chrome-un geliştirici vasitələrindən istifadə etmək üçün:

  1. Google Chrome'u açın.
  2. İnkişaf etmək istədiyiniz veb səhifəyə gedin.
  3. Brauzer penceresinin yuxarı sağ köşesindeki üç satırla simgeye basın.
  4. Menudan, Daha çox alətlər üzərinə keçin və görünən menyuda Geliştirici araçları basın.
  5. Bu, panonun sol tərəfindəki HTML mənbə kodunu və sağdakı CSS-i göstərən bir pəncərə açacaqdır.
  6. Alternativ olaraq, bir veb səhifəsində elementi sağ tıklayıb görünən menyudan Təcrübə etsəniz, Chrome-un geliştirici alətləri açılacaq və seçdiyiniz tam element sağda göstərilən müvafiq CSS ilə HTML-də vurğulanacaq. Bir sitenin bir parçası nasıl hazırlandığını daha çox öyrənmək istəyirsinizsə, bu, çox faydalıdır.

Mənbə Kodunu İzləmi?

Yıllar ərzində bir çox yeni veb-dizaynerlər saytın mənbə kodunu nəzərdən keçirmək və onların təhsilinə və nəhayət, etdikləri işlərə görə istifadə etmək olub-olmadığını sual altına aldı. Saytın kodunu birbaşa kopyalayarkən və sitenizdeki kimi özünüzə keçməyiniz əlbəttə qəbuledilməzdirsə, bu kodu istifadə etmək üçün tramplin kimi istifadə edərək, bu sənayedə nə qədər irəliləyişlər edilir.

Bu məqalənin başlanğıcında dediyim kimi, saytın mənbəyini nəzərdən keçirməklə bir şey öyrənməmiş işləyən bir web professional tapmaq üçün çox çətin olardı! Bəli, bir saytın mənbə kodunu görüntüləmək qanunidir. Bənzər bir şey yaratmaq üçün bu kod istifadə edərək yaxşıdır. Kodları qəbul etdiyiniz kimi qəbul etməli və probleminizlə qarşılaşmağa başlamış olduğunuz yerdir.

Sonda veb-mütəxəssislər bir-birindən öyrənirlər və tez-tez gördükləri və ilham verdikləri işləri yaxşılaşdırırlar, belə ki, saytın mənbə kodunu nəzərdən keçirin və öyrənmə vasitəsi kimi istifadə edin.