HTML, CSS, JS ও PHP ট্রেনিং সেন্টার [পর্ব-০৯] :: ডিভ (div) এর ব্যাবহার।।
Ads by Techtunes - tAds
- HTML, CSS, JS ও PHP ট্রেনিং সেন্টার [পর্ব-০১] :: সূচনা পর্ব
- HTML, CSS, JS ও PHP ট্রেনিং সেন্টার [পর্ব-০২] :: ট্যাগ এর লিস্ট ও ব্যাখ্যা
- HTML, CSS, JS ও PHP ট্রেনিং সেন্টার [পর্ব-০৩] :: লাইন ব্রেক এবং টেক্সট ফরমেটিং
- HTML, CSS, JS ও PHP ট্রেনিং সেন্টার [পর্ব-০৪] :: লিস্ট, লিঙ্ক ও ইমেজের ব্যবহার
- HTML, CSS, JS ও PHP ট্রেনিং সেন্টার [পর্ব-০৫] :: ওয়েব সাইট এ টেবিল তৈরি
- HTML, CSS, JS ও PHP ট্রেনিং সেন্টার [পর্ব-০৬] :: ওয়েব সাইট এ ফর্ম তৈরি
- HTML, CSS, JS ও PHP ট্রেনিং সেন্টার [পর্ব-০৭] :: ওয়েব সাইটে আই ফ্রেম এর ব্যাবহার
- HTML, CSS, JS ও PHP ট্রেনিং সেন্টার [পর্ব-০৮] :: কালার কোড এর লিস্ট ও ব্যবহার
- HTML, CSS, JS ও PHP ট্রেনিং সেন্টার [পর্ব-০৯] :: ডিভ (div) এর ব্যাবহার।।
যাই হক, গত পর্ব গুলতে আমাদের এইচটিএমএল সম্পর্কে মোটামুটি ধারণা এসেছে মনে হয়, এখনও এইচটিএমএল এর অনেক অংশই বাদ আছে তবুও সাথে সাথে সিএসএস সম্পর্কে ছোট খাটো ধারণা নিতে হবে আমাদের।। এইচটিএমএল দিয়ে সাধারণ কাজ গুল করার মত অভিজ্ঞতা হইত আপনাদের হয়ে গেসে আর বাকিটা চর্চার মাধ্যমে এগিয়ে যাবে।। এইচটিএমএল নিয়ে সামনে আর দুই একটা পোস্ট লিখব তারপর এইচটিএমএল এর সাথে সাথে সিএসএস টাও কিছুটা সিখব।।
আজ আমরা এইচটিএমএল দিয়ে ডিভ অর্থাৎ ওয়েব সাইট এ বিভিন্ন অংশ নিয়ে কিভাবে কাজ করতে হয় তা সিখব।।
ট্যাগ অন্যান্য ট্যাগ এর পাত্র হিসাবে কাজ করে অনেকটা body ট্যাগ এর মত।
Div এলিমেন্ট গুলো হলো block এলিমেন্ট যারা অন্তরালে থেকে অন্যান্য ট্যাগ গুলোকে একত্রে করে।
সিএসএস এর ক্ষেত্রে Div এলিমেন্ট অনেক গুরুত্তপুর্ন।
নিচে ডিভে ব্যবহৃত কতকগুলো attributes দেয়া হলো।
id
width
height
title
style
এই অংশ গুল নিয়ে সিএসএস দিয়ে কাজ করতে হয়।। চলুন আগে বেসিকটা দেখে আসি।।
দর্শকদের strong visualization এর জন্য ডিভের style attribute এর মাধ্যমে কালার প্রদর্শন করা যায়।
উপরের কোড গুল দেখুন, এক্তি নিদিষ্ট অঞ্চলের জন্য ডিভ বানান হয়েছে।। এখন এই ডিভ ট্যাগ এর মধ্যে যত কাজই করি না কেন তা অই অঞ্চলেই থাকবে।।
নিচের কোড গুল দেখেন,
এই কোড গুলো দিয়ে পেজ বানালে নিচের ছবির মত দেখাবে।।
এবার আসুন দেখি একটু বিস্তারিত ভাবে,
এবার দেখেন আরেকটা ডিভ এর ব্যাবহার,
নিচের ছবিটা দেখুন তার আগে একবার নিচের কোড গুলোও দেখুন,
আরেকটা উধাহরন দেখেন,
এই কোডের জন্য পেজ হবে এমন,
এখানে ২ টা পেজ বানান হয়েছে ১ম ছবিতে দেখুন সব লেখা গুল বাম পাসে আছে আর ২য় ছবিতে সবগুল দান দিকে মানে ২য় ছবিতে ওয়েব পেজ এর জন্য জায়গা নিধারন করে দেয়া হয়েছে যে এখানে যে সমস্ত ডিজাইন হবে তা দান দিকে শো করবে।।
কোড গুলো ভাল করে দেখুন যে প্রথম ছবির কোড এ
anign
left ব্যাবহার করা হয়েছে মানে এই ডিভ টি বাম পাসে কাজ করবে আর ২য় ছবির
ট্যাগ এ right ব্যাবহার করা হয়েছে তাই এটির অবস্থান থাকবে ডান দিকে।।Div এলিমেন্ট গুলো হলো block এলিমেন্ট যারা অন্তরালে থেকে অন্যান্য ট্যাগ গুলোকে একত্রে করে।
সিএসএস এর ক্ষেত্রে Div এলিমেন্ট অনেক গুরুত্তপুর্ন।
নিচে ডিভে ব্যবহৃত কতকগুলো attributes দেয়া হলো।
id
width
height
title
style
এই অংশ গুল নিয়ে সিএসএস দিয়ে কাজ করতে হয়।। চলুন আগে বেসিকটা দেখে আসি।।
দর্শকদের strong visualization এর জন্য ডিভের style attribute এর মাধ্যমে কালার প্রদর্শন করা যায়।
উপরের কোড গুল দেখুন, এক্তি নিদিষ্ট অঞ্চলের জন্য ডিভ বানান হয়েছে।। এখন এই ডিভ ট্যাগ এর মধ্যে যত কাজই করি না কেন তা অই অঞ্চলেই থাকবে।।
নিচের কোড গুল দেখেন,
1
2
3
4
5
6
7
8
9
10
11
| <html><head><title> Learning html</title></head><body><div style="background: green"><h5 >SEARCH LINKS</h5><a target="_blank" href="www.google.com">Google</a></div></body></html> |
এবার আসুন দেখি একটু বিস্তারিত ভাবে,
এবার দেখেন আরেকটা ডিভ এর ব্যাবহার,
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| <html><head><title> Learning html</title></head><body><div id="menu" align="left" ><a href="/">HOME</a> |<a href="/">CONTACT</a> |<a href="/">ABOUT</a></div><div id="content" align="left" bgcolor="white"><h5>Content Articles</h5><p>This paragraph would be your content paragraph with all of your readable material.</p></div></body></html> |
আরেকটা উধাহরন দেখেন,
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
| <html><head><title> Learning html</title></head><body><div id="menu" align="right" ><a href="/">HOME</a> |<a href="/">CONTACT</a> |<a href="/">ABOUT</a> |<a href="/">LINKS</a></div><div id="content" align="right" ><h5>Content Articles</h5><p>This paragraph would be your contentparagraph with all of your readable material.</p><h5 >Content Article Number Two</h5><p>Here's another content article right here.</p></div></body></html> |
এখানে ২ টা পেজ বানান হয়েছে ১ম ছবিতে দেখুন সব লেখা গুল বাম পাসে আছে আর ২য় ছবিতে সবগুল দান দিকে মানে ২য় ছবিতে ওয়েব পেজ এর জন্য জায়গা নিধারন করে দেয়া হয়েছে যে এখানে যে সমস্ত ডিজাইন হবে তা দান দিকে শো করবে।।
কোড গুলো ভাল করে দেখুন যে প্রথম ছবির কোড এ
1
| <div id="menu" align="left" > |
এভাবে ডিভ ট্যাগ ব্যাবহার করে ইচ্ছা মত ওয়েব পেজ এ ডিজাইন করার জন্য জাইগা নিধারন করে দেয়া যায়।।
ডিভ এর ব্যাবহার আরও অনেক আছে যা সিএসএস সেখার সময় বিস্তারিত ভাবে বর্ণনা করা হবে, এখন সুধু বেসিকটা জেনে রাখেন।। সিএসএস ভাল পারলে ডিভ ট্যাগ নিয়ে ভাল কাজ করতে পারবেন ।।
নিচে একটি ছবি দিলাম ওয়েব পেজ এর আর বিভিন্ন ডিভ গুল দেখিয়ে দিলাম জেন বুঝতে সুবিধা হয় ডিভ ট্যাগ দিয়ে আসলে কিভাবে কাজ করতে হয়।।
নিশ্চয়ই বুঝতে অসুবিধা হচ্ছে না।। আগামীতে সিএসএস সেখার সময় এই ব্যাপারে আরও বিস্তারিত আলোচনা করা হবে।।
আর এর মধ্যে কোন সমস্যা থাকলে তা জানাবেন।। আজ এই পর্যন্তই।। আল্লাহ্ হাফেজ।।
No comments:
Post a Comment