Google Chrome'da HTML manbasini qanday ko'rish kerak

Veb-saytning manba kodini ko'rish orqali qanday qilib yaratilganligini bilib oling

Men birinchi marta veb-uslubchisi sifatida o'z ishimni boshlaganimdan keyin men juda ko'p narsa o'rgandim, men ularga yoqqan boshqa veb-dizaynerlarning ishlarini ko'rib chiqdim. Men yolg'iz emasman. Sizning veb-saytingiz yoki tajribali faxriyangiz bo'ladimi, har xil veb-sahifalarning HTML manbasini ko'rib chiqsangiz, bu sizning martaba davomida ko'p marotaba ishlashingiz mumkin bo'lgan narsadir.

Veb-sayt dizayni uchun yangi bo'lganlar uchun saytning kodini ko'rish - bu ishdan qanday saboq olishingiz va o'zingizning ishingizdagi ma'lum kodni yoki texnikani qo'llashni boshlash uchun qanday qilib muayyan ishlar bajarilganini ko'rishning eng qulay usullaridan biridir. Bugungi kunda ishlaydigan har qanday veb-dizayner, ayniqsa, sanoatning dastlabki kunlaridanoq shug'ullanganlar va ular sizni HTML-ni o'rgandilar, faqat ko'rgan veb-saytlarning manbasini ko'rish orqali o'rganib chiqdilar tomonidan. Veb-dizayn kitoblarini o'qish yoki professional konferensiyalarga kirishdan tashqari, saytning kodini ko'rish - yangi boshlanuvchilar uchun HTMLni o'rganishning ajoyib usuli.

Faqat HTMLdan ko'proq

Shuni esda tutish kerakki, manba fayllari juda murakkab bo'lishi mumkin (va siz ko'rayotgan veb-saytning murakkabligi shundaki, sayt kodi murakkabroq bo'lishi mumkin). Siz ko'rayotgan sahifani tuzadigan HTML tuzilishidan tashqari, ushbu saytning ingl. Ko'rinishini belgilaydigan CSS (kaskad uslublari jadvallari) ham bo'ladi. Bundan tashqari, bugungi kunda ko'plab veb-saytlar HTML bilan birga keltirilgan skript fayllarini o'z ichiga oladi.

Bir nechta skript fayllari bo'lishi ehtimoldan xoli emas, aslida ularning har biri saytning turli jihatlarini kuchaytiradi. Shubhasiz, saytning manba kodi, ayniqsa, siz buni amalga oshirayotgan bo'lsangiz, bu juda katta tuyulishi mumkin. Agar darhol o'sha sayt bilan nima sodir bo'layotganini aniqlay olmasangiz, bu sizni xafa qilmang. HTML manbasini ko'rish bu jarayonning dastlabki bosqichidir. Biroz tajriba bilan, siz ushbu brauzerda ko'rgan veb-saytni yaratish uchun ushbu qismlarning barchasini bir-biriga mos tushishini yaxshiroq tushunishni boshlaysiz. Agar siz kodni yaxshiroq bilib olsangiz, undan ko'proq narsani bilib olasiz va sizni bezovta qilmaydi.

Xo'sh, veb-saytning manba kodini qanday ko'rasiz? Buning uchun Google Chrome brauzeridan foydalanib, qadam-qadam ko'rsatmalar.

Asta-sekin ko'rsatmalar

  1. Google Chrome brauzerini oching (agar Google Chrome o'rnatilgan bo'lmasa, bu bepul yuklab olish).
  2. Siz tekshirmoqchi bo'lgan veb-sahifaga o'ting.
  3. Sahifani o'ng tugmasini bosib, paydo bo'ladigan menyuga qarang. Ushbu menyudan, sahifa manbasini ko'rish- ni bosing.
  4. Ushbu sahifaning manba kodi endi brauzerda yangi tab ko'rinishida ko'rinadi.
  5. Shu bilan bir qatorda, siz CTRL + U klaviaturasidagi yorliqlarni kompyuterda ko'rsatilgan sayt kodi bilan ochish uchun kompyuterda ham ishlatishingiz mumkin. Macda bu qisqartma Buyruq + Alt + U.

Tuzuvchi asboblari

Google Chrome taqdim etadigan oddiy View sahifasi manbasi bilan bir qatorda, saytni yanada chuqurroq qazish uchun mukammal Tuzuvchi vositalaridan ham foydalanishingiz mumkin. Ushbu vositalar nafaqat HTMLni ko'rishni, balki HTML hujjatidagi elementlarni ko'rish uchun qo'llaniladigan CSS-ni ham ko'rish imkonini beradi.

Chrome ishlab chiquvchi vositalaridan foydalanish uchun:

  1. Google Chrome'ni oching.
  2. Siz tekshirmoqchi bo'lgan veb-sahifaga o'ting.
  3. Brauzer oynasining yuqori o'ng burchagidagi uch qatorli belgini bosing.
  4. Menyudan, Ko'proq asboblar ustiga boring va keyin paydo bo'ladigan menyuda Tuzuvchi asboblari- ni bosing.
  5. Bu panelning chap tomonida HTML kodini va o'ngdagi tegishli CSS-ni ko'rsatadigan oyna ochiladi.
  6. Shu bilan bir qatorda, veb-sahifadagi elementni o'ng tugmasini bosib, paydo bo'ladigan menyudan Inspect ni tanlasangiz, Chrome-ning ishlab chiquvchi vositalari ochiladi va siz tanlagan to'liq element o'ngda ko'rsatiladigan tegishli CSS-lari bilan HTMLda ta'kidlanadi. Saytning bir qismi qanday tayyorlanganligi haqida ko'proq bilmoqchi bo'lsangiz, bu juda foydali.

Manba kodini ko'rish huquqi bormi?

Yillar mobaynida ko'pgina yangi veb-dizaynerlar sayt saytidagi kodni ko'rish va uni o'qitish uchun foydalanishi mumkinmi, natijada ular bajaradigan ish uchun foydalanadimi, deb shubha qilmoqdalar. Saytdagi kodni ko'chirib olish va uni o'z sahifangizda o'zingiz kabi o'zingizga topshirishda, albatta, qabul qilinmaydi, bu kodni o'rganish uchun teatr paneli sifatida ishlatish, aslida bu sohada qancha o'zgarishlar amalga oshirilganligi.

Ushbu maqolaning boshida aytib o'tganimdek, saytning manbasini ko'rish orqali hech narsa o'rganmagan ishlaydigan veb-professionalni topish juda qiyin bo'ladi. Ha, saytning kodini ko'rish huquqiydir. Shunga o'xshash narsani yaratish uchun ushbu kodni manba sifatida ishlatish ham yaxshi. Sizning ishingiz muammoga duch kela boshlagan joydagina kodni qabul qilib, uni o'chirish.

Oxir-oqibat, veb-mutahasislar bir-birlaridan o'rganadilar va tez-tez ko'rib turgan va ilhom olgan ishni yaxshilaydilar, shuning uchun saytning kodini ko'rishdan va uni o'rganish vositasi sifatida foydalaning.