তথ্য ও যোগাযোগ প্রযুক্তি • ওয়েব ডিজাইন পরিচিতি এবং HTML
তথ্য ও যোগাযোগ প্রযুক্তি প্রশ্ন
শিমুল একটি ওয়েবপেজে নিচের কোডটি লিখল—
<head> <style type="text/css"> div { width:120px; height:80px; float:left; margin:8px; padding:6px; text-align:center; border:2px solid black; } </style> </head> <body> <div style="background-color:yellow; color:red;">Dhaka</div> <div style="background-color:lightgreen;">Khulna</div> <p>Today is a <span style="color:blue;">sunny</span> day.</p> </body>- ক)(1)
CSS-এর পূর্ণরূপ কী?
- খ)(2)
margin ও padding প্রোপার্টির পার্থক্য ব্যাখ্যা করো।
- গ)(3)
উদ্দীপকের কোডটি ব্রাউজারে চালালে কী ধরনের আউটপুট পাওয়া যাবে তা বর্ণনা করো।
- ঘ)(4)
শিমুল একই ধরনের আরও একটি বাক্স যোগ করতে চায়, যার লেখা Sylhet, পেছনের রং lightskyblue এবং লেখার রং navy। সে আবার সবগুলো বাক্সের প্রস্থ 150 পিক্সেল করতে চায়। কীভাবে এ দুটি কাজ করলে কম পরিবর্তনে করা যাবে? স্টাইল ট্যাগ ও style অ্যাট্রিবিউটের ভূমিকা বিশ্লেষণ করে যুক্তিসহ লেখো।
উত্তর ও ব্যাখ্যা
- ক)
AI-তৈরি নমুনা উত্তর CSS-এর পূর্ণরূপ Cascading Style Sheet।
- খ)
AI-তৈরি নমুনা উত্তর margin প্রোপার্টি দিয়ে একটি উপাদানের সীমানা থেকে অন্যান্য উপাদানের দূরত্ব নির্ধারণ করা হয়, অর্থাৎ এটি উপাদানের বাইরের ফাঁকা জায়গা। অন্যদিকে padding প্রোপার্টি দিয়ে উপাদানের সীমানা থেকে এর ভেতরের উপাদানগুলোর দূরত্ব নির্ধারণ করা হয়, অর্থাৎ এটি উপাদানের ভেতরের ফাঁকা জায়গা। উদাহরণস্বরূপ, margin বাড়ালে দুটি div আরও দূরে সরে যায়, আর padding বাড়ালে div-এর ভেতরের লেখা বর্ডার থেকে দূরে সরে আসে।
- গ)
AI-তৈরি নমুনা উত্তর style ট্যাগে div এলিমেন্টের জন্য যে স্টাইল দেওয়া আছে, তা পেজের সবগুলো div-এর ওপর প্রযোজ্য হবে। তাই ব্রাউজারে দুটি বাক্স দেখা যাবে। প্রতিটি বাক্সের প্রস্থ 120 পিক্সেল ও উচ্চতা 80 পিক্সেল হবে, বাক্সের চারপাশে 2 পিক্সেল পুরু কালো কঠিন (solid) বর্ডার থাকবে, বাইরে 8 পিক্সেল margin এবং ভেতরে 6 পিক্সেল padding থাকবে এবং বাক্সের লেখা মাঝ বরাবর (center) সাজানো থাকবে। float:left থাকায় বাক্স দুটি পাশাপাশি বাঁ দিক থেকে বসবে।
প্রথম বাক্সের পেছনের রং হবে হলুদ এবং লেখা Dhaka লাল রঙের হবে, কারণ এই div-এ আলাদাভাবে style অ্যাট্রিবিউটে background-color:yellow ও color:red দেওয়া আছে। দ্বিতীয় বাক্সের পেছনের রং হবে হালকা সবুজ এবং এতে color দেওয়া না থাকায় Khulna লেখাটি ডিফল্ট কালো রঙে দেখা যাবে।
এর পরে একটি অনুচ্ছেদে "Today is a sunny day." লেখা দেখা যাবে, যার মধ্যে কেবল sunny শব্দটি span এলিমেন্টের স্টাইলের কারণে নীল রঙের হবে এবং বাকি অংশ ডিফল্ট কালো রঙের হবে। - ঘ)
AI-তৈরি নমুনা উত্তর নতুন বাক্সটির জন্য শিমুলকে শুধু একটি নতুন div লিখতে হবে এবং তাতে নিজস্ব রং দিতে হবে—
<div style="background-color:lightskyblue; color:navy;">Sylhet</div> উদ্দীপকে width, height, float, margin, padding, text-align ও border-এর মতো সাধারণ বৈশিষ্ট্যগুলো head-এর ভেতরে style ট্যাগে সব div-এর জন্য একবারই বলে দেওয়া হয়েছে। তাই নতুন div-এ এগুলো আবার লিখতে হবে না, স্বয়ংক্রিয়ভাবে প্রযোজ্য হবে। শুধু যে বৈশিষ্ট্য প্রতিটি div-এর জন্য আলাদা, অর্থাৎ background-color ও color, তা ওই div-এর style অ্যাট্রিবিউটে দিতে হয়। প্রস্থ পরিবর্তনের জন্য শিমুলকে শুধু style ট্যাগের ভেতরে width:120px কে width:150px করতে হবে। একটি জায়গায় পরিবর্তন করলেই তিনটি বাক্সের প্রস্থ একসাথে 150 পিক্সেল হয়ে যাবে। যদি সব স্টাইল প্রতিটি div-এর style অ্যাট্রিবিউটে আলাদাভাবে লেখা হতো, তাহলে প্রতিটি div-এ একই কোড বারবার লিখতে হতো এবং প্রস্থ বদলাতে হলে তিনটি জায়গায় পরিবর্তন করতে হতো। এতে সময় বেশি লাগত এবং ভুলের সম্ভাবনা বাড়ত। অতএব, একাধিক এলিমেন্টে সাধারণ স্টাইলের জন্য style ট্যাগ এবং এলিমেন্টভেদে ভিন্ন স্টাইলের জন্য style অ্যাট্রিবিউট ব্যবহার করাই সবচেয়ে কার্যকর ও সুবিধাজনক।
আরও প্রশ্ন অনুশীলন করতে অ্যাপে যাও