ডাইমেনশন (Dimention)
কোন HTML উপাদানের প্রস্থ এবং উচ্চতা নিয়ন্ত্রণের জন্য সি এস এস এ ডাইমেনশন ব্যবহার করা হয়।সি এস এস এ ডাইমেনশন নির্ধারণের জন্য বেশ কিছু প্রোপার্টি ব্যবহার করা হয়।এগুলো হচ্ছে, height, width, max-height, max-width, min-width, min-height ।
অনুশীলন প্রজেক্ট
<html>
<head>
<title> www.tutohost.com</title>
<style>
body{background: #FFC}
h2{height:50px;
background:#C30;}
p{max-height:100px;
max-width:250px;
background:#C03}
h3{background:#C60;
margin-left:150px;}
#main{min-height:350px;
min-height:250px;
background:#F99;
padding:10px;}
</style>
</head>
<body >
<h2>This is an example of Box Model.</h2>
<p>
We are bangladeshi Hostgator hosting provider. The world wide technical and support team is working for your best movement. We are bangladeshi Hostgator hosting provider. The world wide technical and support team is working for your best movement. </p>
<h3>24/7 World Class Support</h3>
<p id="main">Reliable and fast server is here. You will get 99.99% uptime guaranty. Many Bangladeshi techie people have no ability to make their site with huge taka. So we are also offering Free hosting plan.</p>
</body>
</html>
একটা নোটপ্যাড open করে উপরের code টুকু লিখে file মেনু থেকে Save as এ ক্লিক করে File name: index.html , Save as type : All files, দিয়ে save করে index.html ফাইলটি Mozilla Firefox দিয়ে open করলে নিচে প্রদর্শিত ছবির মত দেখাবে।
কোডিং বিশ্লেষণ:
প্রথম প্যারাগ্রাফটির ক্ষেত্রে max-height:100px; এবং max-width:250px; ফলে প্রথম প্যারাগ্রাফটির জন্য যে ডাইমেনশন উল্লেখ করা হয়েছে সমস্ত লেখার জন্য তা যথেষ্ঠ নয়, এজন্য ব্যাকগ্রাউন্ড কালার ডাইমেনশন অনুযায়ী প্রদর্শিত হচ্ছে, কিন্তু লেখা ব্যাকগ্রাউন্ড অতিক্রম করে গেছে।
24/7 World Class Support লেখাটির কিছু অংশ প্রথম প্যারাগ্রাফটির মধ্যে প্রবেশ করেছে।কিন্তু 24/7 World Class Support লেখাটি প্রথম প্যারাগ্রাফটির পরে প্রদর্শিত হওয়া উচিৎ। কারণ প্রকৃত অর্থে প্রথম প্যারাগ্রাফটির ব্যাকগ্রাউন্ড যেখানে শেষ হয়েছে, প্রারাগ্রাফটিও ঐ স্থানেই শেষ হয়ে গিয়েছে, যে কারণে World Class Support লেখাটি সঠিক স্থানে শুরু হলেও এর কিছু অংশ প্রথম প্যারাগ্রাফটির মধ্যে প্রবেশ করেছে।
দ্বিতীয় প্যারাগ্রাফটির ক্ষেত্রে ব্যাকগ্রাউন্ড অনেক নিচে পর্যন্ত প্রদর্শন করছে কারণ এ প্যারাগ্রাফটির জন্য min-height:350px; নির্ধারণ করা হয়েছে যা প্যারাগ্রাফটির টেক্সট এর উচ্চতার চেয়ে অনেক বেশি।
তিনি ইলেকট্রিক্যাল ইঞ্জিনিয়ারিং এ লেখাপড়া করছেন। টিউটোরিয়ালবিডি ও বিজ্ঞানপ্রযুক্তি ব্লগে তিনি ইলেক্ট্রনিক্স সহ বিভিন্ন টেকনোলজি বিষয়ে লিখে থাকেন। বর্তমানে তিনি লেখাপড়ার পাশাপাশি টিউটোহোস্টে কর্মরত আছেন।
কপি রাইট © ২০১১থেকে যতদিন চলবে সর্বস্বত্ত্ব সংরক্ষিত