গত কয়েক মাসে পাঠশালা বিভাগের মাধ্যমে আমরা ওয়েব পেজ সংক্রান্ত অনেক কৌশল শেখানোর চেষ্টা করেছি। ধারাবাহিক এ পর্বগুলোর মাধ্যমে পিএইচপি, এসকিউএল সার্ভার, ড্রিমওয়েভারসহ বেশ কিছু প্লাটফর্মে কাজ করার জন্য প্রাথমিক জ্ঞান দেবার চেষ্টা করা হয়েছে। ইতোপূর্বে পাঠশালা বিভাগে ওয়েব ডিজাইনিং এবং ডাটাবেজসংশ্লিষ্ট বেশ কিছু প্রোগ্রামিং দেখানো হয়েছে। ওয়েব ডিজাইনিংয়ের জন্য asp.net নিয়ে আলোচনা করা হয়েছে। এ কথা সত্য ধারাবাহিকভাবে এসব প্রোগ্রামিং ল্যাঙ্গুয়েজ মাসিক কোনো পত্রিকার মাধ্যমে শিখাতে গেলে পাঠকদের ধৈর্য ও আগ্রহ কমে যাবে। এজন্য আমরা বিভিন্নভাবে লেখায় বৈচিত্র আনতে চেয়েছি। এসব ল্যাঙ্গুয়েজ বা ডেভেলপিং সফটওয়্যার সবগুলোই স্ক্রিপটিংসংশ্লিষ্ট। গত সংখ্যায় পিএইচপিতে সার্চিং এবং সর্টিংয়ের ব্যবহার দেখিয়েছি। এসব ল্যাঙ্গুয়েজের সাথে যে বিষয়টি সবদিক থেকে জড়িত তা হচ্ছে ক্যাসকেড স্টাইল শীট। এ সংখ্যা থেকে বহুল আলোচিত এবং ওয়েব ডেভেলপারদের আকর্ষণের কেন্দ্রবিন্দুতে থাকা ক্যাসকেড স্টাইল শীট বা সিএসএস নিয়ে আলোচনা করা হবে।

প্রোগ্রামিং ল্যাঙ্গুয়েজ এবং বিভিন্ন অ্যাপ্লিকেশন কাজ করে ডাটা নিয়ে। প্রোগ্রামিং ল্যাঙ্গুয়েজ এ ডাটা কতো ভালোভাবে হ্যান্ডল করতে পারে তার ওপর নির্ভর করে প্রোগ্রামিং ল্যাঙ্গুয়েজের দক্ষতা। ক্যাসকেড স্টাইল শীট কাজ করে একবার ব্যবহার হয়ে যাওয়া ডাটা নিয়ে। ক্যাসকেড স্টাইল শীট বা সিএসএস-এর সবচেয়ে বড় সুবিধা হচ্ছে এর মাধ্যমে একই কাজ একাধিকবার করা যায় খুব কম রিসোর্সিংয়ে। আর সেইসাথে ওয়েব পেজে দেয়া যায় অসাধারণ সব গ্রাফিক্সের কারুকাজ। সিএসএস-কে এক ধরনের ওয়েব ডেভেলপিং টেকনিক বলা যেতে পারে। ওয়েব ফর্ম অ্যাপ্লিকেশন থেকে ডিজাইনকে আলাদা করার কাজে সিএসএস-এর জুড়ি নেই।

সাধারণত তিনভাবে সিএসএস স্ক্রিপ্টে অ্যাপ্লাই করা যায়, যেমন- এলিমেন্ট স্টাইল, আইডি স্টাইল এবং ক্লাস স্টাইল। স্ক্রিপ্টে এক্সটার্নাল অনেক এলিমেন্ট ব্যবহার করার প্রয়োজন হতে পারে যেমন দ্রুত লোড হবে এমন স্ক্রিপ্ট তৈরি করার জন্য। এগুলোকেই এলিমেন্ট স্টাইল বলা হয়। যেমন পেজ লোড হবার সময় সিস্টেম থেকে ফন্ট এবং তার স্টাইল লোড করা যায়। এমন একটি স্ক্রিপ্টের উদাহরণ হচ্ছে;

{
font-family:Arial;
line-height:1.5em;
color:black;
}

এখানে পুরো কোড স্ক্রিপ্টের বডিতে প্যারাগ্রাফ ট্যাগের মধ্যে রাখতে হবে। প্যারাগ্রাফ ট্যাগ বলতে

.....

বুঝানো হয়েছে। কিছু নির্দিষ্ট এলিমেন্টের জন্য স্টাইল ব্যবহার করতে চাইলে আইডি স্টাইল ব্যবহার করতে হবে। এমন একটি স্টাইল তৈরি করা হয়েছে এই পেজের জন্য;











আবার অনেক সময় পুরো এলিমেন্ট পেজে ব্যবহার করা হয়। এর কারণ হচ্ছে একই এলিমেন্ট যাতে বার বার লোড না হয়। একই জিনিস কোনো পেজে বার বার লোড না করে এক লেডিংয়ে বার বার চালানো গেলে অনেক দ্রুত লোডেড পেজ পাওয়া যায়। এ পদ্ধতি ব্যবহার করেই এলিমেন্ট স্টাইল কাজে লাগানো হয়। একই পেজে যখন এই এলিমেন্ট স্টাইল বার বার ব্যবহার করা হয় তখন তাকেই ক্লাস স্টাইল বলে।

কন্টেনার আইডি স্টাইলের একটি উদাহরণ দেখা যাক। নিচে দেয়া তিনটি কোড পেজে অ্যাপ্লাই করে দেখা যেতে পারে;










/* Global Style Sheet */
h1
{
border:dashed 3px #000;
}
.nav
{
background-color:#ccc;
}
.navHeader
{
border:solid 3px #000;
}
...



/* Global Style Sheet */
h1
{
border:dashed 3px #000;
}
.nav
{
background-color:#ccc;
}
.nav h1
{
border:solid 3px #000;
}
...




টেবল ট্যাগ ব্যবহার না করেও ওয়েব পেজে টেবলের কাজ করা যেতে পারে স্টাইল ব্যবহার করে। এক্ষেত্রে div ট্যাগ ব্যবহার করা যেতে পারে। এ ধরনের ট্যাগ ব্যবহার করার সুবিধা হচ্ছে পেজ দ্রুত হয় এর মাধ্যমে। এরকম একটি পেজ তৈরি করে দেখানো হলো;



.inputForm
{
position:relative;
}
.inputForm .section
{
position:relative;
clear:both;
}
.inputForm .section .lbl,
.inputForm .section .lblNoText
{
position:relative;
float:left;
}
.inputForm .section .ctl
{
position:relative;
float:left;
}



চিত্র-১-এ ডিভ ট্যাগ ব্যবহার করে টেবল ছাড়াই টেবলের কাজ করা হয়েছে।

এই কোড ব্যবহার করার সময় মনে রাখতে হবে, এখানে অনেক ফিল্ড ডামি হিসেবে ব্যবহার করা হয়েছে কোড লেখার সুবিধার জন্য। সরাসরি ব্যবহার করার সময় সেসব ডামি পরিবর্তন করে দিতে হবে।

কজ ওয়েব

ফিডব্যাক : mortuza_ahmad@yahoo.com