চিত্র-২ ওয়েব পেইজে প্রদর্শনের জন্য HTML কোডিং লিখ।
ওয়েব পেজে সারণি বা টেবিল আকারে কোনো তথ্য প্রদর্শনের জন্য HTML (HyperText Markup Language) কোডিং অপরিহার্য। HTML টেবিল ট্যাগ ব্যবহার করে ডেটা সুবিন্যস্তভাবে উপস্থাপন করা যায়, যা ব্যবহারকারীদের জন্য তথ্য পাঠযোগ্য এবং সহজে বোধগম্য করে তোলে। প্রশ্নোক্ত চিত্র-২ এ একটি "Result Sheet" এর কাঠামো দেখানো হয়েছে, যা সারণি আকারে ডেটা প্রদর্শনের একটি উৎকৃষ্ট উদাহরণ।
চিত্র-২ বিশ্লেষণ করলে দেখা যায়, এটি একটি ফলাফল শীট যেখানে একটি মূল শিরোনাম "Result Sheet" রয়েছে। এর নিচে বাম দিকে "Name" এবং "Roll" লেখা দুটি কোষ (cell) এবং ডান দিকে এই দুটি কোষের সমান উচ্চতার একটি একক কোষ "GPA" লেখা রয়েছে। এই ধরনের জটিল বিন্যাস তৈরি করতে HTML টেবিল ট্যাগ যেমন চিত্র-২ এর ওয়েব পেইজে প্রদর্শনের জন্য প্রয়োজনীয় HTML কোডিং নিচে দেওয়া হলো: উপরিউক্ত কোডে, ওয়েবপেজে কোনো ছবি বা চিত্র প্রদর্শনের জন্য HTML এর উদ্দীপকে প্রদর্শিত 'চিত্র-১' এবং 'চিত্র-২' ওয়েবপেজে প্রদর্শনের জন্য
১ ক্লিকে প্রশ্ন, শীট, সাজেশন ও শুধু প্রশ্ন সিলেক্ট করুন — প্রশ্নপত্র অটোমেটিক তৈরি!,
(টেবিল রো), (টেবিল হেডার) এবং (টেবিল ডেটা) এর পাশাপাশি colspan (কলাম একত্রীকরণ) এবং rowspan (সারি একত্রীকরণ) অ্যাট্রিবিউট ব্যবহার করা প্রয়োজন হয়। colspan অ্যাট্রিবিউটটি "Result Sheet" শিরোনামটিকে একাধিক কলাম জুড়ে প্রসারিত করতে ব্যবহৃত হবে, আর rowspan অ্যাট্রিবিউটটি "GPA" কোষটিকে একাধিক সারি জুড়ে প্রসারিত করতে ব্যবহৃত হবে।
চিত্র-২ এর জন্য HTML কোডিং:
Result Sheet
Name
GPA
Roll
ট্যাগটি টেবিলের শুরু নির্দেশ করে। প্রথম
ট্যাগের ভিতরে ব্যবহার করা হয়েছে "Result Sheet" কে দুটি কলাম জুড়ে প্রসারিত করতে এবং এটি একটি হেডার হিসেবে কাজ করবে। দ্বিতীয় Result Sheet এ একটি সাধারণ ডেটা কোষ এবং Name "GPA" কোষটিকে দুটি সারি জুড়ে প্রসারিত করে। সর্বশেষ GPA এ শুধু ব্যবহার করা হয়েছে কারণ "GPA" কোষটি পূর্ববর্তী সারি থেকে প্রসারিত হয়েছে। এই কোডিংটি চিত্র-২ এ প্রদর্শিত ফলাফল শীটটির নির্ভুল কাঠামো তৈরি করবে, যা ওয়েব পেজে ডেটা উপস্থাপনের ক্ষেত্রে HTML এর শক্তিশালী কার্যকারিতা প্রমাণ করে।
Roll
Related Question
View All
(ইমেজ) ট্যাগ ব্যবহার করা হয়। এটি একটি এম্পটি ট্যাগ, অর্থাৎ এর কোনো ক্লোজিং ট্যাগ নেই। চিত্র প্রদর্শনের জন্য ট্যাগের src (source) অ্যাট্রিবিউটটি অপরিহার্য, যেখানে ছবির ফাইল পাথ (location) উল্লেখ করা হয়। এছাড়া, alt (alternative text) অ্যাট্রিবিউটটি ছবির বিষয়বস্তু বর্ণনা করে, যা ছবি লোড হতে ব্যর্থ হলে অথবা স্ক্রিন রিডার (screen reader) ব্যবহারের ক্ষেত্রে গুরুত্বপূর্ণ। ট্যাগ ব্যবহার করে তাদের উৎস (source) উল্লেখ করতে হবে। যদি চিত্র-১ এর ফাইলনেম chitra-1.png এবং চিত্র-২ এর ফাইলনেম chitra-2.png হয়, তাহলে তাদের প্রদর্শনের জন্য প্রয়োজনীয় HTML কোডিং নিম্নরূপ হতে পারে। ছবির আকার নিয়ন্ত্রণের জন্য width (প্রস্থ) বা height (উচ্চতা) অ্যাট্রিবিউট ব্যবহার করা যায়।
চিত্র-১: বিষয়সমূহের তালিকা

চিত্র-২: ফলাফল শীট

অনলাইন পরীক্ষা তৈরির সফটওয়্যার!
Related Question
Promotion