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

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

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

ক্যাসকেড স্টাইল শীটের বৈশিষ্ট্য হচ্ছে কোড লিখে .css এক্সটেনশনে পেজের একই ফোল্ডারে সেভ করতে হয়। তারপর এই ফাইল থেকে ক্লাস নিয়ে ওয়েব পেজের মূল ফাইলে কাজে লাগানো হয়। এখন মূল ফাইল কি ধরনের হবে এ ব্যাপারে কোনো বাছবিচার নেই। ওয়েব পেজের মূল ফাইল পিএইচপি, এএসপি, জেএসপি, এইচটিএমএল যেকোনো ল্যাঙ্গুয়েজের হতে পারে।

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

এখানে দুইটি কোড দেয়া আছে। এর মধ্যে প্রথমটি এইচটিএমএল কোড এবং দিবতীয়টি সিএসএস কোড। প্রথম কোড .html এক্সটেনশনে সেভ করতে হবে আর দিবতীয় কোড style.css নামে একই ফোল্ডারে সেভ করতে হবে। আর চালানোর জন্য যেকোনো ওয়েব সার্ভার চালিয়ে (wamp, xamp, apache-উইন্ডোজ, apache, lamp-লিনআক্স) localhost/name.html অথবা 127.0.0.1/name.html লিখে আউটপুট দেখা যাবে।

কোড-১ :



















এবারে দিবতীয় কোড দেখা যাক। এটাই হচ্ছে সিএসএস কোড।

কোড-২ :

body { background-color: #fff;
}

#wrapper{ width: 100%;
height: 100%;
}

div { width: 300px;
height: 300px;
margin: 10px;
float: left;
}

#round { -moz-border-radius: 10px;
-webkit-border-radius: 11px;
border: 1px solid #000;
background-color: #000;
}

#indie {-moz-border-radius-topleft: 10px;
-moz-border-radius-bottomleft: 10px;
-webkit-border-top-left-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
border: 1px; solid #000;
background-color: #000;
}

#opacity{ opacity: 0.3;
background-color: #000;
}

#shadow { border: 1px solid #000;
background-color: #fff;
-webkit-box-shadow: 3px 5px 10px #ccc;
}

#resize { background-color: #fff;
border: 1px solid #000;
resize: both;
overflow: auto;
max-width: 500px;
max-height: 500px;
}

এ কোডে স্টাইল হিসেবে প্রথমেই পেজের ব্যাকগ্রাউন্ড কালার নির্ধারণ করে দেয়া হয়েছে সাদা এবং এর মান হচ্ছে fff। একে প্রয়োজনমতো পরিবর্তন করে নেয়া যাবে। এর পরে উচ্চতা এবং প্রশস্তের মাপ ঠিক করে নেয়া হয়েছে। -moz কোড ব্যবহার করা হয়েছে মজিলা ফায়ারফক্স ব্রাউজারের জন্য আর- webkit কোড ব্যবহার করা হয়েছে অন্যান্য ওয়েব ব্রাউজার যেমন অপেরার জন্য। এর পরের সেগমেন্টগুলোতে বাক্সের আকৃতি এবং রঙের ঘনত্ব নিয়ে কাজ করা হয়েছে।

পেজটি যখন চালাবেন তখন পেজের মধ্যে বিভিন্ন আকৃতির বাক্স দেখতে পারবেন। এগুলোর মধ্য থেকে ইচ্ছেমতো বাক্স পছন্দ করে তা পুরো পেজে অ্যাপ্লাই করতে পারবেন। আর ডায়নামিক পেজের জন্য একই স্টাইল প্রতিটি পেজে ব্যবহার করা যাবে। তাহলে বার বার লোডিংয়ের কোনো ঝামেলা থাকবে না।
এখন style.css কোডের বিভিন্ন মান এবং কালার কোড পরিবর্তন করেই দেখুন কি হয়। আর এই পেজ মজিলা এবং অপেরা ওয়েব ব্রাউজারে চালানো যাবে।

কজ ওয়েব

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