div মানে Division, একটা অংশ বা ভাগ। এইচটিএমএল পেইজের একটা সেকশন। এইচটিএমএল ইলিম্যান্টকে বিভিন্ন গ্রুপে ভাগ করার জন্য div ট্যাগ ব্যবহার করা হয়। আর বিভিন্ন ভাগে ভাগ করার প্রধান উদ্যেশ্য হচ্ছে ভিন্ন ভিন্ন স্টাইল দেওয়া।
নিচের কোড গুলো দেখুন। ব্রাউজারে দেখতে এখানে ক্লিক করুন।
<!DOCTYPE html> <html> <body> <p>This is some text.</p> <div style="background:#ddd; color:green;"> <h3>This is a heading in a div element</h3> <p>This is some text in a div element.</p> </div> <div style="background:#ADD23F;"> <h3>This is another div</h3> <h3>some text inside another div</h3> </div> </body> </html>
উপরে দুটি ভিন্ন ভিন্ন div তৈরি করেছি। যার ব্যাকগ্রাউন্ড কালার ভিন্ন এবং টেক্সট কালার ভিন্ন। div গুলোর স্টাইল দেওয়ার জন্য আমরা ইনলাইন স্টাইল ব্যবহার করেছি।
কোড গুলো পরিবর্তন করে দেখতে পারেন।
আমরা চাইলে div এর সাইজ মানে প্রস্থ এবং উচ্চতা বলে দিতে পারি।
এবার নিচের উদাহরনটি দেখুন। এখানে আমরা Internal style sheet করেছি। উদাহরনটি দেখা যাবে এখানে।
<!DOCTYPE html>
<html>
<head>
<style>
div{
background:#ADD23F;
width:300px;
height:100px;
padding:10px;
}
</style>
</head>
<body>
<div>
<h3>This is a heading in a div element</h3>
<p>This is some text in a div element.</p>
</div>
</body>
</html>
আমরা একের অধিক div ট্যাগ ব্যবহার করতে পারি। তা প্রথম উদাহরনেই দেখেছি। এবং এক একটার জন্য এক এক রকমের স্টাইল দিতে পারিঃ
উদাহরনটি দেখা যাবে এখানে।
<!DOCTYPE html>
<html>
<head>
<style>
.div1{
background:#ADD23F;
width:300px;
height:100px;
margin:10px;
padding:10px;
}
.div2{
background:#ddd;
width:300px;
height:100px;
margin:10px;
padding:10px;
}
</style>
</head>
<body>
<div class="div1">
<h3>This is a heading in a div element</h3>
<p>This is some text in a div element.</p>
</div>
<div class="div2">
<h3>This is another div</h3>
<p>This is some text in a this div element.</p>
</div>
</body>
</html>
span দিয়ে একটা লাইনের মধ্যের একটা নির্দিষ্ট অংশকে গ্রুপ করার জন্য ব্যবহৃত হয়। নিচের উদারনটি দেখুনঃ
<!DOCTYPE html>
<html>
<body>
<p>This is a <span style="color:red;font-weight:bold">Example of span tag</span>. The span tag is used to group inline-elements in a document. </p>
</body>
</html>
উপরে উদাহরনে আমরা Example of span tag এ অংশকে অন্যান্য লেখা গুলোকে আলাদা করে দেখার জন্য span ট্যাগ ব্যবহার করে লাল রঙ এবং বোল্ড করে দিয়েছি। নিচের উদাহরনটি দেখুন। আমরা চাইলে span ট্যাগ এর জন্য আলাদা করে স্টাইল লিখতে পারিঃ
উদাহরনটি দেখা যাবে এখানে।
<!DOCTYPE html>
<html>
<style>
span{
background:#ddd;
color:red;
}
</style>
</head>
<body>
<p>This is a <span>Example of span tag</span>. The span tag is used to group inline-elements in a document. </p>
</body>
</html>
একের অধিক sapn ট্যাগ আমরা ব্যবহার করতে পারি। আবার এক একটা span এর জন্য এক এক ধরনের কালার ব্যবহার করতে পারি। নিচের উদাহরনটি দেখুনঃ
<!DOCTYPE html>
<html>
<body>
<p>This is a <span style="color:red;font-weight:bold">Example of span tag</span>. The span tag is used to group <span style="color:blue;">inline-elements</span> in a document. </p>
</body>
</html>
আমি জাকির হোসাইন। বিশ্বের সর্ববৃহৎ বিজ্ঞান ও প্রযুক্তির সৌশল নেটওয়ার্ক - টেকটিউনস এ আমি 14 বছর 8 মাস যাবৎ যুক্ত আছি। টেকটিউনস আমি এ পর্যন্ত 224 টি টিউন ও 1487 টি টিউমেন্ট করেছি। টেকটিউনসে আমার 5 ফলোয়ার আছে এবং আমি টেকটিউনসে 0 টিউনারকে ফলো করি।
পৃথিবীতে অল্পকয়েক দিনের জন্য অনেকেই আসে, হেঁটে খেলে চলে যায়। এর মধ্যে অল্প কয়েক জনই পায়ের চাপ রেখে যায়।ওদের একজন হতে ইচ্ছে করে। প্রযুক্তির আরেকটি সেরা ব্লগ টেকটুইটস। আপনাদের স্বাগতম, যেখানে প্রতিটি বন্ধুর অংশ গ্রহনে গড়ে উঠেছে একটি পরিবার। আপনাদের পছন্দ হবে আশা করি। ফেসবুকে আমি - ?জাকির!
@আরিফ: HTML4 হচ্ছে HTML এর চতুর্থ ভার্সন। এইচটিএমএল এ আরো অনেক গুলো ফিচার যুক্ত করে প্রকাশ করা হয়েছিল HTML5. এটাই।
আর নোটপ্যাড++ ব্যবহার করতে পারেন। বা sublime text 2
http://www.sublimetext.com/2
http://notepad-plus-plus.org/download/v6.3.3.html
ভাই এত সুন্দর টিউনটি করার জন্য ধন্যবাদ।আচ্ছা file fost এ upload করার পরে visitorকে download করতে দেয়ার জন্য
যে link টা ব্যবহার করা হয় সেটা কিভাবে পাব যদি একটু বলতেন তাহলে খুব উপকৃত হতাম।
HTML 5 er jonno valo kono bangla pdf boi er link dite paren? ami new shyktesi tai koyekta qus… 1. HTML 4 ar 5 er moddhe pattokko ki?
2. ami shykhar jonno notepad use kori amar pc te jeita ase oyta.. ar ki ki use kora jai? apne jetate leksen oyta te deklam numbr.dewa potthek line e? ami new janale upokkrito hobo..