"ইন্সপেক্ট এলিমেন্ট" হল ফায়ারফক্স ব্রাউজারের একটি ডেভেলপার টুল যা আপনি যে কোন ওয়েব পেজে HTML কোড ট্র্যাক করতে ব্যবহার করতে পারেন। একটি ওয়েব পেজের HTML এবং CSS স্টাইলশীটগুলি "ইন্সপেক্ট এলিমেন্ট" দিয়ে সম্পাদনা করা যায়। আপনি আপনার পছন্দ মতো একটি পৃষ্ঠা সম্পাদনা করার চেষ্টা করতে পারেন এবং সম্পাদিত ওয়েবপৃষ্ঠাটি পুনরায় লোড করে এটি আগের মতো ফিরে পেতে পারেন।
ধাপ
2 এর অংশ 1: উপাদানগুলি পরীক্ষা করা
ধাপ 1. ফায়ারফক্স আপডেট করুন (alচ্ছিক)।
আপনি ফায়ারফক্সের পুরোনো সংস্করণ ব্যবহার করলে এই নিবন্ধে আলোচিত বৈশিষ্ট্যগুলি অ্যাক্সেস করতে পারবেন না। আপনি ফায়ারফক্সের কোন সংস্করণটি ব্যবহার করছেন তা পরীক্ষা করলে আপডেটটি স্বয়ংক্রিয়ভাবে ইনস্টল হয়ে যাবে।
ফায়ারফক্স 9 এবং আগের সংস্করণগুলিতে "ইন্সপেক্ট এলিমেন্ট" টুল মোটেও নেই।
ধাপ 2. যেকোন ওয়েবপেজ এলিমেন্টে ডান ক্লিক করুন।
আপনি যেকোনো ছবি, পাঠ্য, পটভূমি বা উপাদানটিতে ডান ক্লিক করতে পারেন। যদি আপনার মাউসে শুধুমাত্র একটি বাটন থাকে, তাহলে বাম-ক্লিক এবং কন্ট্রোল কী-এর সমন্বয়ে একটি ডান-ক্লিক হবে।
ধাপ 3. ড্রপ-ডাউন মেনু থেকে "উপাদান পরিদর্শন করুন" এ ক্লিক করুন।
একটি টুলবার উইন্ডোর নীচে উপস্থিত হবে। টুলবারের নীচে একটি প্যানেলও উপস্থিত হবে এবং সক্রিয় পৃষ্ঠায় HTML কোড প্রদর্শন করবে।
ধাপ 4. বিদ্যমান টুলবার এবং প্যানেলগুলি সম্পর্কে জানুন।
যখন আপনি "ইন্সপেক্ট এলিমেন্ট" ব্যবহার করেন, ব্রাউজার উইন্ডোর নিচে বেশ কয়েকটি প্যানেল খুলবে। নিম্নলিখিতগুলি "ইন্সপেক্ট এলিমেন্ট" এ টুলবার এবং প্যানেলের নাম এবং ফাংশন বর্ণনা করে:
- উপরের সারিতে রয়েছে টুলবক্স টুলবার। এখানে বেশ কিছু টুল পাওয়া যাবে, কিন্তু আমরা বাম দিকে ইন্সপেক্টর বাটনে ফোকাস করব। নিশ্চিত করুন যে এই বোতামটি সক্রিয় (বোতামটির রঙ দ্বারা নির্দেশিত হয় যা সক্রিয় হলে নীল হয়ে যায়) এই গাইড জুড়ে।
- তার নীচে, এইচটিএমএল এলিমেন্টের ব্রেডক্রামসের একটি লাইন আছে যা বর্তমানে নির্বাচিত এলিমেন্টের অবস্থান নির্দেশ করে।
- নেভিগেশন প্রম্পটের অধীনে ফলকটি HTML পেজ বা ওয়েব পেজের "মার্কআপ ভিউ" দেখায়। নির্বাচিত উপাদানটির HTML চিহ্নিত করা হবে এবং এই ফলকে কেন্দ্রীভূত করা হবে।
- ডান দিকের ফলকটি বর্তমান ওয়েব পেজের CSS স্টাইলশীট প্রদর্শন করে।
ধাপ 5. অন্য উপাদান নির্বাচন করুন।
যখন টুলবার খোলা থাকে, আপনি সহজেই অন্যান্য উপাদান নির্বাচন করতে পারেন। এটি করার তিনটি উপায় রয়েছে:
- নির্বাচিত উপাদানটি চিহ্নিত করার জন্য HTML এর একটি লাইনের উপরে ঘুরুন (এই বৈশিষ্ট্যটির জন্য Firefox 34+ প্রয়োজন)। সেই উপাদান নির্বাচন করতে HTML এ ক্লিক করুন।
- টুলবারের বাম কোণে "সিলেক্ট এলিমেন্ট" টুলটিতে ক্লিক করুন: এতে একটি বাক্সের উপরে কার্সার আকৃতির আইকন রয়েছে। একটি উপাদান চিহ্নিত করতে ওয়েব পৃষ্ঠায় কার্সারটি সরান এবং এটি নির্বাচন করতে ক্লিক করুন।
ধাপ 6. এইচটিএমএল কোড ট্রেস করুন।
এইচটিএমএল প্যানেলে যেকোনো জায়গায় ক্লিক করুন। কোড থেকে কোডে যাওয়ার জন্য কীবোর্ডের বাম এবং ডান দিকনির্দেশক কীগুলি ব্যবহার করুন (এই বৈশিষ্ট্যটির জন্য ফায়ারফক্স 39+ প্রয়োজন)। এই পদ্ধতিটি কার্সার দিয়ে নির্বাচন করার জন্য খুব ছোট উপাদান নির্বাচন করার জন্য দরকারী।
- গ্রেড আউট এইচটিএমএল এমন উপাদানগুলিকে নির্দেশ করে যা পৃষ্ঠায় প্রদর্শিত হয় না। এতে অন্তর্ভুক্ত উপাদানগুলি হল মন্তব্য, যেমন নোড এবং CSS ডিসপ্লে প্রপার্টি দ্বারা লুকানো অন্যান্য উপাদান।
- বিষয়বস্তু দেখাতে বা লুকানোর জন্য বাক্সের বাম দিকে তীর ক্লিক করুন। সম্পূর্ণ সামগ্রী প্রদর্শন করতে, তীরটি ক্লিক করার সময় alt="চিত্র" বা বিকল্পটি ধরে রাখুন।
ধাপ 7. উপাদানটি সনাক্ত করুন।
ব্রেডক্রামস সারির একেবারে ডান কোণে অনুসন্ধান ক্ষেত্র (লুপ-আকৃতির আইকন) সন্ধান করুন। অনুসন্ধান ক্ষেত্রটি প্রসারিত করতে ক্লিক করুন এবং আপনি যে HTML কোডটি অনুসন্ধান করতে চান তা টাইপ করুন। আপনি টাইপ করার সাথে সাথে একটি পপ-আপ প্রদর্শিত হবে যা মিলে যাওয়া সার্চ ফলাফল দেখাবে। সার্চ রেজাল্ট থেকে একটি এলিমেন্টে ক্লিক করুন এবং HTML প্যানেলে যে কোডটি আপনি খুঁজছেন তাতে স্ক্রোল করুন।
2 এর 2 অংশ: HTML সম্পাদনা
ধাপ 1. আবার শুরু করতে পৃষ্ঠাটি পুনরায় লোড করুন।
আপনি যদি ওয়েবসাইট ডেভেলপমেন্ট টুলে নতুন হন, তবে সচেতন থাকুন যে আপনি যে পৃষ্ঠাগুলি সম্পাদনা করেন তাতে স্থায়ী পরিবর্তন করবেন না। আপনার সম্পাদনাগুলি শুধুমাত্র আপনার স্ক্রিনে প্রদর্শিত হয় যতক্ষণ না আপনি পৃষ্ঠাটি পুনরায় লোড বা বন্ধ করেন। কি হবে তা না জানলেও নির্দ্বিধায় পরীক্ষা করুন।
পদক্ষেপ 2. সম্পাদনা করতে HTML- এ ডাবল ক্লিক করুন।
ডাবল ক্লিক ইনলাইন এইচটিএমএল। নতুন লেখা টাইপ করুন এবং পরিবর্তনগুলি সংরক্ষণ করতে এন্টার চাপুন।
ধাপ more. আরও বিকল্প আনতে ব্রেডক্রাম্বে টুলটি ক্লিক করে ধরে রাখুন
লক্ষ্য করুন যে ব্রেডক্রাম্ব টুলবারটি এইচটিএমএল ট্রি এবং তার উপরের টুলবারের মধ্যে বসে আছে। আরো মেনু খুলতে এই সারিতে একটি টুল ক্লিক করুন এবং ধরে রাখুন। নীচে উপলব্ধ বিকল্পগুলির একটি ইঙ্গিত (সম্পূর্ণ নয়):
- "এইচটিএমএল হিসাবে সম্পাদনা করুন" আপনাকে প্রতিটি লাইন সম্পাদনার পরিবর্তে সরাসরি এইচটিএমএল গাছ থেকে সমস্ত এইচটিএমএল সামগ্রী সম্পাদনা করতে দেয়।
- "অনুলিপি অভ্যন্তরীণ এইচটিএমএল" নোডের ভিতরে সম্পূর্ণ সামগ্রী অনুলিপি করে, যখন "বাইরের HTML অনুলিপি করুন" বিষয়বস্তু এবং নোডগুলি অনুলিপি করে (যেমন বা
- কপি পেস্ট করার জন্য "পেস্ট →" বেশ কয়েকটি বিকল্প নিয়ে আসে, যেমন নোডের আগে বা নোডের প্রথম সন্তানের পরে।
- : hover,: active, and: focus ব্যবহারকারীর সাথে ইন্টারঅ্যাক্ট করার সময় উপাদানটির চেহারা পরিবর্তন করে। পরিবর্তিত প্রভাবগুলি CSS স্টাইলশীট (ডানদিকের প্যানেল থেকে সম্পাদনাযোগ্য) থেকে সংজ্ঞায়িত করা হয়।
ধাপ 4. ড্র্যাগ এবং ড্রপ।
কোডের উপাদানগুলিকে পুনর্বিন্যাস করতে, একটি বিন্দু রেখা প্রদর্শিত না হওয়া পর্যন্ত HTML এ ক্লিক করুন এবং ধরে রাখুন। গাছটিকে উপরে এবং নিচে সরান এবং মাউস বোতামটি ছেড়ে দিন যখন লাইনটি যেখানে আপনি চান।
এই বৈশিষ্ট্যটির জন্য ফায়ারফক্স 39 এবং পরবর্তী প্রয়োজন।
পদক্ষেপ 5. ডেভেলপার টুলবার বন্ধ করুন।
সম্পূর্ণ ইন্সপেক্ট এলিমেন্ট উইন্ডোটি বন্ধ করতে, সিএসএস প্যানেলের উপরে অবস্থিত টুলবারের উপরের ডান কোণে X বোতামটি ক্লিক করুন।
পরামর্শ
- আপনি উইন্ডোর শীর্ষে থাকা মেনু বিকল্পগুলি থেকে টুলবারটি খুলতে পারেন:
- উইন্ডোজ: ফায়ারফক্স → ওয়েব ডেভেলপার → টগল টুলস
- ম্যাক বা লিনাক্স: টুলস → ওয়েব ডেভেলপার → টগল টুলস
- ফায়ারফক্স has০ -এ সিএসএস প্যানেল লুকানোর বিকল্প রয়েছে যাতে আপনার এইচটিএমএল এডিট করার আরও জায়গা থাকে। ব্রেডক্রামস সারির একেবারে ডানদিকে এবং অনুসন্ধান ক্ষেত্রের ডানদিকে তীর চিহ্নটি সন্ধান করুন। CSS প্যানেলটি লুকানোর জন্য এই আইকনে ক্লিক করুন এবং এটিকে সামনে আনতে আবার ক্লিক করুন।
- আপনি CSS প্যানেলগুলি সম্পাদনা করতে পারেন, কিন্তু সেগুলি এই নিবন্ধে তালিকাভুক্ত নয়। আপনি ইন্টারনেটে CSS কোড সম্পাদনার নির্দেশনা পেতে পারেন।
