গুগল ক্রোমের এইচটিএমএল সোর্স কিভাবে দেখতে হয়

কিভাবে একটি সোর্স কোডটি দেখে ওয়েবসাইট তৈরি করা হয়েছে তা জানুন

আমি প্রথম যখন একটি ওয়েব ডিজাইনার হিসেবে আমার কর্মজীবন শুরু করি, তখন আমি অন্য ওয়েব ডিজাইনারদের কাজের পর্যালোচনা করে অনেক কিছু শিখেছি যাদেরকে আমি প্রশংসিত করেছিলাম। আমি এই একা না। আপনি ওয়েব শিল্প বা নতুন অভিজ্ঞ ব্যক্তিদের নতুন কিনা, বিভিন্ন ওয়েব পৃষ্ঠাগুলির এইচটিএমএল উৎস দেখতে আপনার কর্মজীবনের কোর্সে আপনি অনেক বার করতে পারেন।

যারা ওয়েব ডিজাইনের নতুন, যারা সাইটের কোনও সোর্স কোড দেখতে চান তাদের জন্য সবচেয়ে সহজ উপায়গুলি দেখতে হয় যে কিভাবে কিছু জিনিসগুলি সম্পন্ন করা হয় যাতে আপনি যে কাজ থেকে শিখতে পারেন এবং আপনার নিজের কাজের নির্দিষ্ট কোড বা কৌশল ব্যবহার করতে শুরু করতে পারেন। আজকের যেকোনো ওয়েব ডিজাইনার আজ, বিশেষ করে যারা এই শিল্পের প্রারম্ভিক দিনগুলি থেকে এসেছে এবং এটি একটি নিরাপদ বেয়াদতি যা তারা আপনাকে বলে যে তারা এইচটিএমএল শিখেছে এমন ওয়েব পেজের উত্স দেখে তারা দেখেছেন এবং তারা প্রতারিত হয়েছে দ্বারা. ওয়েব ডিজাইন বই পড়ার পাশাপাশি পেশাদার সম্মেলনগুলিতে অংশগ্রহণের পাশাপাশি, একটি সাইটের সোর্স কোডটি দেখার জন্য, শুরু করার জন্য এইচটিএমএল শিখতে একটি দুর্দান্ত উপায়।

শুধু HTML চেয়ে বেশি

মনে রাখা এক জিনিস যে সোর্স ফাইলগুলি খুব জটিল হতে পারে (এবং আপনি যে ওয়েবসাইটটি দেখছেন তা আরও জটিল, যে সাইটটির কোডটি সম্ভবত বেশি জটিল)। এইচটিএমএল স্ট্রাকচারের পাশাপাশি যে পৃষ্ঠাটি আপনি দেখছেন সেটি তৈরি করে, সেখানেও সিএসএস (ক্যাসকেডিং স্টাইল শীট) থাকবে যা সেই সাইটটির চাক্ষুষ চেহারাকে নির্দেশ করে। উপরন্তু, অনেক ওয়েবসাইট আজ এইচটিএমএল সহ স্ক্রিপ্ট ফাইল অন্তর্ভুক্ত অন্তর্ভুক্ত করা হবে

সম্ভবত একাধিক স্ক্রিপ্ট ফাইল অন্তর্ভুক্ত হতে পারে, প্রকৃতপক্ষে, প্রতিটি সাইটের সাইটের বিভিন্ন দিককে শক্তিশালী করা। সত্যি, একটি সাইট এর উৎস কোড অপ্রতিরোধ্য মনে হতে পারে, বিশেষ করে যদি আপনি এই কাজ করতে নতুন। আপনি অবিলম্বে যে সাইট সঙ্গে কি ঘটছে তা বুঝতে পারবেন না, যদি হতাশ না পেতে এইচটিএমএল সোর্স দেখানো এই প্রক্রিয়ার প্রথম ধাপ মাত্র। সামান্য অভিজ্ঞতার সঙ্গে, আপনি আপনার ব্রাউজারে যে ওয়েবসাইটটি দেখেন তা তৈরি করার জন্য এই সমস্ত টুকরো একসঙ্গে কিভাবে একসঙ্গে একত্রিত হবে তা ভালভাবে বুঝতে শুরু করবে। আপনি কোডের সাথে আরো পরিচিত হিসাবে পেতে, আপনি এটি থেকে আরও জানতে পারবেন এবং এটা আপনার মনে কঠিন করতে হবে না।

সুতরাং কিভাবে আপনি একটি ওয়েবসাইট সোর্স কোড দেখতে পারি? এখানে গুগল ক্রোম ব্রাউজার ব্যবহার করে এটি করার ধাপে ধাপে নির্দেশাবলী।

ধাপে ধাপে নির্দেশাবলীর

  1. Google Chrome ওয়েব ব্রাউজার খুলুন (যদি আপনার Google Chrome ইনস্টল না থাকে তবে এটি একটি বিনামূল্যের ডাউনলোড)।
  2. আপনি পরীক্ষা করতে চান ওয়েব পৃষ্ঠা নেভিগেট।
  3. পৃষ্ঠার ডান-ক্লিক করুন এবং প্রদর্শিত মেনুটি দেখুন। যে মেনু থেকে, দেখুন পৃষ্ঠা উৎস দেখুন
  4. সেই পৃষ্ঠার জন্য সোর্স কোড এখন ব্রাউজারের একটি নতুন ট্যাব হিসাবে প্রদর্শিত হবে।
  5. বিকল্পভাবে, আপনি প্রদর্শিত একটি পাতার উপর CTRL + U কীবোর্ড শর্টকাট ব্যবহার করতে পারেন একটি সাইট এর উত্স কোড প্রদর্শিত একটি উইন্ডো খুলতে। ম্যাক এ, এই শর্টকাট হল Command + Alt + U

ডেভেলপার টুলস

গুগল ক্রোমের সহজ দেখুন পৃষ্ঠার সোর্স ক্ষমতা ছাড়াও, আপনি তাদের চমৎকার ডেভেলপার টুলগুলির সুবিধা গ্রহণ করতে পারেন যাতে কোনও সাইটে গভীরভাবে খনন করতে পারেন। এই সরঞ্জামগুলি আপনাকে এইচটিএমএল দেখতে শুধুমাত্র অনুমতি দেবে, তবে সেই এইচটিএমএল নথির উপাদানগুলি দেখতে প্রযোজ্য CSS।

Chrome এর বিকাশকারী সরঞ্জামগুলি ব্যবহার করতে:

  1. Google Chrome খুলুন
  2. আপনি পরীক্ষা করতে চান ওয়েব পৃষ্ঠা নেভিগেট।
  3. ব্রাউজার উইন্ডো উপরের ডান কোণে তিন লাইন আইকনে ক্লিক করুন।
  4. মেনু থেকে, আরো সরঞ্জামের উপর হভার করুন এবং তারপরে মেনুতে বিকাশকারী সরঞ্জামগুলি ক্লিক করুন।
  5. এটি একটি উইন্ডো খুলবে যা প্যানের বামে এইচটিএমএল সোর্স কোড এবং ডানদিকে সম্পর্কিত সিএসএল দেখাবে।
  6. বিকল্পভাবে, যদি আপনি কোনও ওয়েবপৃষ্ঠায় ডান ক্লিক করেন এবং মেনু থেকে Inspect নির্বাচন করেন তবে Chrome এর বিকাশকারী সরঞ্জামগুলি পপ আপ হবে এবং আপনি যে সঠিক উপাদানটি নির্বাচন করেছেন তার ডান দিকে প্রদর্শিত CSS এর সাথে এইচটিএমএলতে হাইলাইট করা হবে। এটি একটি সুপার সহায়ক যদি আপনি আরও একটি সাইট কিভাবে একটি নির্দিষ্ট টুকরা করা হয়েছিল সম্পর্কে আরও জানতে চান।

উত্স কোড আইনি দেখছেন?

বছরের পর বছর ধরে, আমি অনেক নতুন ওয়েব ডিজাইনারদের প্রশ্ন করেছি যে এটি একটি সাইট এর উত্স কোড দেখতে গ্রহণযোগ্য এবং তাদের শিক্ষার জন্য এবং পরিশেষে তারা যে কাজের জন্য ব্যবহার করে তা গ্রহণযোগ্য। একটি সাইট এর কোড অনুলিপি কপি এবং একটি সাইটে আপনার নিজের হিসাবে বন্ধ এটি নিঃসন্দেহে গ্রহণযোগ্য নয়, থেকে শেখার একটি স্প্রিংবোর্ড হিসাবে যে কোড ব্যবহার করে আসলে এই অগ্রগতি এই শিল্পে কতগুলি তৈরি করা হয়।

আমি এই নিবন্ধের শুরুতে উল্লিখিত হিসাবে, আপনি আজ একটি কাজ ওয়েব পেশাদার খুঁজে খুঁজে বের করতে হবে এমন কিছু যারা একটি সাইট এর উত্স দেখতে দ্বারা কিছু শিখেছি না! হ্যাঁ, একটি সাইট এর উৎস কোডটি দেখতে আইনী। অনুরূপ কিছু নির্মাণ একটি সম্পদ হিসাবে যে কোড ব্যবহার করা হয় এছাড়াও জরিমানা। আপনার কাজ যেখানে আপনি সমস্যা সম্মুখীন শুরু যেখানে হিসাবে কোড গ্রহণ হিসাবে এবং গ্রহণ করা হয় বন্ধ।

শেষ পর্যন্ত, ওয়েব পেশাদাররা একে অপরের কাছ থেকে শেখে এবং প্রায়ই যে কাজগুলি দেখে এবং অনুপ্রাণিত হয় সেগুলির উপর প্রায়ই উন্নতি করে, তাই কোনও সাইটের উৎস কোড দেখতে দ্বিধা করবেন না এবং এটি শেখার সরঞ্জাম হিসাবে ব্যবহার করবেন না।