সরঞ্জাম প্রয়োজন
এইচটিএমএলে সারিবদ্ধকরণের ধারণাটি বিশদভাবে জানার জন্য, এইচটিএমএল কোড চালানোর জন্য প্রয়োজনীয় কিছু প্রয়োজনীয় সরঞ্জাম উল্লেখ করতে হবে। একটি হল একটি টেক্সট এডিটর, এবং দ্বিতীয়টি একটি ব্রাউজার। একটি টেক্সট এডিটর হয়তো একটি নোটপ্যাড, সাবলাইম, নোটপ্যাড ++, অথবা অন্য যে কোন সাহায্য করতে পারে। এই নির্দেশিকায়, আমরা নোটপ্যাড, উইন্ডোতে একটি ডিফল্ট অ্যাপ্লিকেশন এবং গুগল ক্রোমকে ব্রাউজার হিসাবে ব্যবহার করেছি।
HTML ফরম্যাট
সারিবদ্ধতা বোঝার জন্য, আমাদের প্রথমে এইচটিএমএল বুনিয়াদি সম্পর্কে কিছু জানা দরকার। আমরা একটি নমুনা কোডের স্ক্রিনশট উপস্থাপন করেছি।
< html >
< মাথা >...</ মাথা >
< শরীর >…।</ শরীর >
</ html >
HTML এর দুটি প্রধান অংশ রয়েছে। একটি হলো মাথা, অন্যটি হলো শরীর। সমস্ত ট্যাগ কৌণিক বন্ধনীতে লেখা। হেড অংশটি শিরোনামের ট্যাগ ব্যবহার করে HTML পৃষ্ঠার নামকরণ নিয়ে কাজ করে। এবং এছাড়াও, মাথার ভিতরে স্টাইল স্টেটমেন্ট ব্যবহার করুন। অন্যদিকে, বডি টেক্সট, ইমেজ বা ভিডিও ইত্যাদির অন্য সব ট্যাগ নিয়ে কাজ করে, অন্য কথায়, আপনি আপনার এইচটিএমএল পেজে যা যোগ করতে চান তা এইচটিএমএল এর বডি পার্টে লেখা থাকে।
আমার এখানে একটি বিষয় হাইলাইট করা দরকার তা হল ট্যাগ খোলা এবং বন্ধ করা। লেখা প্রতিটি ট্যাগ অবশ্যই বন্ধ করতে হবে। উদাহরণস্বরূপ, এইচটিএমএল এর শুরু ট্যাগ এবং শেষ ট্যাগ। সুতরাং এটি লক্ষ্য করা যায় যে শেষ ট্যাগটিতে ট্যাগের নাম অনুসারে একটি স্ল্যাশ রয়েছে। একইভাবে, অন্যান্য সমস্ত ট্যাগও একই পদ্ধতি অনুসরণ করে। প্রতিটি টেক্সট এডিটর তারপর এইচটিএমএল এর এক্সটেনশনের সাথে সংরক্ষণ করা হয়। উদাহরণস্বরূপ, আমরা example.html নামের একটি ফাইল ব্যবহার করেছি। তারপর আপনি দেখতে পাবেন যে নোটপ্যাড আইকনটি ব্রাউজার আইকনে পরিবর্তিত হয়েছে।
যেহেতু সারিবদ্ধকরণ স্টাইলিং এর বিষয়বস্তু। এইচটিএমএলে স্টাইল তিন ধরনের। একটি ইন-লাইন শৈলী, অভ্যন্তরীণ এবং বাহ্যিক স্টাইলিং। ইনলাইন ট্যাগে বোঝায়। মাথার ভিতরে অভ্যন্তরীণ লেখা আছে। একই সময়ে, বাহ্যিক শৈলী একটি পৃথক CSS ফাইলে লেখা হয়।
পাঠ্যের ইনলাইন স্টাইলিং
উদাহরণ 1
এখন সময় এসেছে এখানে একটি উদাহরণ আলোচনা করার। উপরে প্রদর্শিত চিত্রটি বিবেচনা করুন। নোটপ্যাডের সেই ফাইলে আমরা একটি সাধারণ লেখা লিখেছি। যখন আমরা এটি একটি ব্রাউজার হিসাবে চালাই, তখন এটি ব্রাউজারে নিচের দেওয়া আউটপুট দেখাবে।
যদি আমরা চাই এই লেখাটি কেন্দ্রে প্রদর্শিত হোক, আমরা ট্যাগ পরিবর্তন করব।
এই ট্যাগটি একটি ইনলাইন ট্যাগ। আমরা এই ট্যাগটি লিখব যখন আমরা এইচটিএমএল বডিতে অনুচ্ছেদ ট্যাগ চালু করব। লেখার পরে, তারপর অনুচ্ছেদ ট্যাগ বন্ধ করুন। সংরক্ষণ করুন এবং তারপর ব্রাউজারে ফাইলটি খুলুন।
অনুচ্ছেদটি কেন্দ্রে সারিবদ্ধ, যেমন এটি ব্রাউজারে প্রদর্শিত হয়। এই উদাহরণে ব্যবহৃত ট্যাগটি কোন প্রান্তিককরণের জন্য ব্যবহার করা হয়, যেমন, বাম, ডান এবং কেন্দ্রের জন্য। কিন্তু যদি আপনি শুধুমাত্র কেন্দ্রে পাঠ্য সারিবদ্ধ করতে চান, তাহলে এই উদ্দেশ্যে একটি নির্দিষ্ট ট্যাগ ব্যবহার করা হয়।
< কেন্দ্র > …… ..</ কেন্দ্র >টেক্সটের আগে এবং পরে সেন্টার ট্যাগ ব্যবহার করা হয়। এটি পূর্ববর্তী উদাহরণের মতো একই ফলাফলও দেখাবে।
উদাহরণ 2
এটি এইচটিএমএল পাঠ্যে অনুচ্ছেদের পরিবর্তে শিরোনামটি সারিবদ্ধ করার একটি উদাহরণ। শিরোনামের এই সারিবদ্ধতার জন্য বাক্য গঠন একই। এটি ট্যাগের মাধ্যমে অথবা ইনলাইন স্টাইলিং বা হেডিং ট্যাগের ভিতরে অ্যালাইন ট্যাগ যোগ করে করা যেতে পারে।
আউটপুট ব্রাউজারে দেখানো হয়। শিরোনাম ট্যাগ সরল পাঠ্যকে শিরোনামে রূপান্তরিত করেছে, এবং ট্যাগ এটিকে কেন্দ্রে সারিবদ্ধ করেছে।
উদাহরণ 3
পাঠ্যটিকে কেন্দ্রে সারিবদ্ধ করুন
একটি উদাহরণ বিবেচনা করুন যেখানে ব্রাউজারে একটি অনুচ্ছেদ প্রদর্শিত হয়। আমাদের এটিকে কেন্দ্রে সারিবদ্ধ করতে হবে।
আমরা এই ফাইলটি নোটপ্যাডে খুলব এবং তারপর ট্যাগটি ব্যবহার করে এটিকে কেন্দ্রীয় অবস্থানে সারিবদ্ধ করব।
< পৃ শৈলী =পাঠ্য-সারিবদ্ধ: কেন্দ্র;>অনুচ্ছেদ ট্যাগে এই ট্যাগ যুক্ত করার পরে, দয়া করে ফাইলটি সংরক্ষণ করুন এবং ব্রাউজারে চালান। আপনি দেখতে পাবেন যে অনুচ্ছেদ এখন কেন্দ্রিক সারিবদ্ধ। নিচের ছবিটি দেখুন।
ডানদিকে পাঠ্য সারিবদ্ধ করুন
লেখাটিকে ডানদিকে ঝুঁকানো পৃষ্ঠার কেন্দ্রে রাখার মতোই। অনুচ্ছেদ ট্যাগে ঠিক কেন্দ্র শব্দটি ডান দ্বারা প্রতিস্থাপিত হয়।
< পৃ শৈলী =পাঠ্য-সারিবদ্ধ: ঠিক;> ……… ..</ পৃ >পরিবর্তনগুলি নীচে সংযুক্ত ছবির মাধ্যমে দেখা যেতে পারে।
ব্রাউজারে ওয়েব পেজটি সংরক্ষণ করুন এবং রিফ্রেশ করুন। পাঠ্যটি এখন পৃষ্ঠার ডান দিকে সরানো হয়েছে।
পাঠ্যের অভ্যন্তরীণ স্টাইলিং
উদাহরণ 1
উপরে বর্ণিত হিসাবে অভ্যন্তরীণ CSS (ক্যাসকেডিং স্টাইল শীট) বা অভ্যন্তরীণ স্টাইলিং হল এক ধরনের CSS যা পৃষ্ঠার html এর প্রধান অংশে সংজ্ঞায়িত করা হয়। এটি অভ্যন্তরীণ ট্যাগের অনুরূপ কাজ করে।
উপরে দেখানো পৃষ্ঠাটি বিবেচনা করুন; এটিতে শিরোনাম এবং অনুচ্ছেদ রয়েছে। আমাদের কেন্দ্রে পাঠ্য দেখার প্রয়োজন আছে। ইনলাইন সারিবদ্ধকরণ প্রতিটি অনুচ্ছেদের ভিতরে ট্যাগের ম্যানুয়াল লেখা প্রয়োজন। কিন্তু স্টাইল স্টেটমেন্টে p উল্লেখ করে পাঠ্যের প্রতিটি অনুচ্ছেদে অভ্যন্তরীণ স্টাইলিং স্বয়ংক্রিয়ভাবে প্রয়োগ করা যেতে পারে। অনুচ্ছেদ ট্যাগের ভিতরে কোন ট্যাগ লেখার প্রয়োজন নেই। এখন কোডটি পর্যবেক্ষণ করুন এবং এটি কাজ করছে।
< শৈলী >পি{টেক্সট-সারিবদ্ধ: কেন্দ্র}
</ শৈলী >
এই ট্যাগটি মাথার অংশে স্টাইল ট্যাগের মধ্যে লেখা আছে। এবার ব্রাউজারে কোডটি রান করুন।
যখন আপনি ব্রাউজারে পৃষ্ঠাটি চালান, আপনি দেখতে পাবেন যে সমস্ত অনুচ্ছেদ পৃষ্ঠার কেন্দ্রে সারিবদ্ধ। এই ট্যাগটি পাঠ্যে উপস্থিত প্রতিটি অনুচ্ছেদে প্রয়োগ করা হয়।
উদাহরণ 2
এই উদাহরণে, একটি অনুচ্ছেদের মতো, আমরা পাঠ্যের সমস্ত শিরোনাম ডান দিকে সারিবদ্ধ করব। এই উদ্দেশ্যে, আমরা মাথার ভিতরে স্টাইল স্টেটমেন্টে শিরোনাম উল্লেখ করব।
H2, h3{
টেক্সট-সারিবদ্ধ: ঠিক
}
এখন ফাইলটি সেভ করার পর ব্রাউজারে নোটপ্যাড ফাইলটি রান করুন। আপনি দেখতে পাবেন যে শিরোনামগুলি HTML পৃষ্ঠার ডান দিকে সারিবদ্ধ।
উদাহরণ 3
অভ্যন্তরীণ স্টাইলে, এমন একটি পরিস্থিতি হতে পারে যেখানে আপনাকে পাঠ্যের কিছু অনুচ্ছেদের পাঠ্য সারিবদ্ধ করতে হবে এবং অন্যগুলি একই থাকবে। অতএব, আমরা শ্রেণীর ধারণা ব্যবহার করছি। আমরা স্টাইল ট্যাগের ভিতরে একটি বিন্দু পদ্ধতি দিয়ে ক্লাস চালু করি। অনুচ্ছেদ ট্যাগের ভিতরে ক্লাসের নাম যোগ করা প্রয়োজন যা আপনি সারিবদ্ধ করতে চান।
< শৈলী >.কেন্দ্র{
টেক্সট-সারিবদ্ধ: কেন্দ্র}
</ শৈলী >
শ্রেণী =কেন্দ্র> ……</ পৃ >
আমরা প্রথম তিনটি অনুচ্ছেদে ক্লাস যোগ করেছি। এখন কোডটি চালান। আপনি আউটপুটে দেখতে পারেন যে প্রথম তিনটি অনুচ্ছেদ কেন্দ্রে একত্রিত হয়েছে, অন্যরা নয়।
উপসংহার
এই নিবন্ধটি ব্যাখ্যা করেছে যে ইনলাইন এবং অভ্যন্তরীণ ট্যাগগুলির মাধ্যমে সারিবদ্ধকরণ বিভিন্ন উপায়ে করা যেতে পারে।