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