অনেক দিন টিউন করতে পারি নি বলে আগেই ক্ষমা চেয়ে নিচ্ছি।। খুব বেস্ততার মধ্যে ছিলাম কিছু দিন তাই চেইন টিউনটি করতে পারি নি।। আজ থেকে আবার সুরু করলাম।।
যাই হক, গত পর্ব গুলতে আমাদের এইচটিএমএল সম্পর্কে মোটামুটি ধারণা এসেছে মনে হয়, এখনও এইচটিএমএল এর অনেক অংশই বাদ আছে তবুও সাথে সাথে সিএসএস সম্পর্কে ছোট খাটো ধারণা নিতে হবে আমাদের।। এইচটিএমএল দিয়ে সাধারণ কাজ গুল করার মত অভিজ্ঞতা হইত আপনাদের হয়ে গেসে আর বাকিটা চর্চার মাধ্যমে এগিয়ে যাবে।। এইচটিএমএল নিয়ে সামনে আর দুই একটা পোস্ট লিখব তারপর এইচটিএমএল এর সাথে সাথে সিএসএস টাও কিছুটা সিখব।।
আজ আমরা এইচটিএমএল দিয়ে ডিভ অর্থাৎ ওয়েব সাইট এ বিভিন্ন অংশ নিয়ে কিভাবে কাজ করতে হয় তা সিখব।।
ট্যাগ অন্যান্য ট্যাগ এর পাত্র হিসাবে কাজ করে অনেকটা body ট্যাগ এর মত।
Div এলিমেন্ট গুলো হলো block এলিমেন্ট যারা অন্তরালে থেকে অন্যান্য ট্যাগ গুলোকে একত্রে করে।
সিএসএস এর ক্ষেত্রে Div এলিমেন্ট অনেক গুরুত্তপুর্ন।
নিচে ডিভে ব্যবহৃত কতকগুলো attributes দেয়া হলো।
id
width
height
title
style
এই অংশ গুল নিয়ে সিএসএস দিয়ে কাজ করতে হয়।। চলুন আগে বেসিকটা দেখে আসি।।
দর্শকদের strong visualization এর জন্য ডিভের style attribute এর মাধ্যমে কালার প্রদর্শন করা যায়।
উপরের কোড গুল দেখুন, এক্তি নিদিষ্ট অঞ্চলের জন্য ডিভ বানান হয়েছে।। এখন এই ডিভ ট্যাগ এর মধ্যে যত কাজই করি না কেন তা অই অঞ্চলেই থাকবে।।
নিচের কোড গুল দেখেন,
<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>
এই কোড গুলো দিয়ে পেজ বানালে নিচের ছবির মত দেখাবে।।
এবার আসুন দেখি একটু বিস্তারিত ভাবে,
এবার দেখেন আরেকটা ডিভ এর ব্যাবহার,
<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>
নিচের ছবিটা দেখুন তার আগে একবার নিচের কোড গুলোও দেখুন,
আরেকটা উধাহরন দেখেন,
<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 content paragraph 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>
এই কোডের জন্য পেজ হবে এমন,
এখানে ২ টা পেজ বানান হয়েছে ১ম ছবিতে দেখুন সব লেখা গুল বাম পাসে আছে আর ২য় ছবিতে সবগুল দান দিকে মানে ২য় ছবিতে ওয়েব পেজ এর জন্য জায়গা নিধারন করে দেয়া হয়েছে যে এখানে যে সমস্ত ডিজাইন হবে তা দান দিকে শো করবে।।
কোড গুলো ভাল করে দেখুন যে প্রথম ছবির কোড এ
<div id="menu" align="left" >
anign left ব্যাবহার করা হয়েছে মানে এই ডিভ টি বাম পাসে কাজ করবে আর ২য় ছবির ট্যাগ এ right ব্যাবহার করা হয়েছে তাই এটির অবস্থান থাকবে ডান দিকে।।
এভাবে ডিভ ট্যাগ ব্যাবহার করে ইচ্ছা মত ওয়েব পেজ এ ডিজাইন করার জন্য জাইগা নিধারন করে দেয়া যায়।।
ডিভ এর ব্যাবহার আরও অনেক আছে যা সিএসএস সেখার সময় বিস্তারিত ভাবে বর্ণনা করা হবে, এখন সুধু বেসিকটা জেনে রাখেন।। সিএসএস ভাল পারলে ডিভ ট্যাগ নিয়ে ভাল কাজ করতে পারবেন ।।
নিচে একটি ছবি দিলাম ওয়েব পেজ এর আর বিভিন্ন ডিভ গুল দেখিয়ে দিলাম জেন বুঝতে সুবিধা হয় ডিভ ট্যাগ দিয়ে আসলে কিভাবে কাজ করতে হয়।।
নিশ্চয়ই বুঝতে অসুবিধা হচ্ছে না।। আগামীতে সিএসএস সেখার সময় এই ব্যাপারে আরও বিস্তারিত আলোচনা করা হবে।।
আর এর মধ্যে কোন সমস্যা থাকলে তা জানাবেন।। আজ এই পর্যন্তই।। আল্লাহ্ হাফেজ।।
ফেসবুক এ আমাকে পেতে নিচে ক্লিক করুন---
আমি kazi Kowshik। বিশ্বের সর্ববৃহৎ বিজ্ঞান ও প্রযুক্তির সৌশল নেটওয়ার্ক - টেকটিউনস এ আমি 12 বছর 5 মাস যাবৎ যুক্ত আছি। টেকটিউনস আমি এ পর্যন্ত 22 টি টিউন ও 281 টি টিউমেন্ট করেছি। টেকটিউনসে আমার 1 ফলোয়ার আছে এবং আমি টেকটিউনসে 0 টিউনারকে ফলো করি।
পিএইচপি টিউটোরিয়াল পেতে আমার পিএইচপি ব্লগটি দেখতে পারেন http://tutphp.blogspot.com/2012/09/blog-post_12.html
কোশিক ভাই দয়া করে আমাকে সাহায্য করুন। আমার ওয়াফ সাইটের পেজ গুলোতে prev next অথবা 12 3 4 5 Last কীভাবে যুক্ত করব।
@abdulquddussumon: ভাই আপনি কি এইচটিএমএল ব্যাবহার করে ডিজাইন করেছেন?? আর সাইট সম্পরকে বিস্তারিত বললে ভাল হয়
vai jan khub valo hayche, apner kache balchilam je favicon add karar system neye ekta tunes karen khub khuchi habo vai
হ্যাঁ ভাই আমি এইচটিএমএল ব্যবহার করে সাইটি তৈরী করেছি এখন আমাকে কী করতে হবে ভাই। আমার সাইটের লিংক হচ্ছে
http://abdulquddussumonbd.wapka.mobi
আপনার সাহায্যের অপেক্ষায় আছি
Just awesome tunes. Though you should have to give more effort to make other tunes quicker, but please do the next others for us. Please, carry on.
প্রিয় টিউনার,
আপনাকে এই চেইনটি চলমান করার জন্য অনুরোধ করা গেল। দয়া করে আপনার চেইন টিউনটি নতুন পর্ব যুক্ত করুন এবং নিয়মিত আপডেট করুন। ধন্যবাদ।
![jQuery for Web Design [পর্ব-০৪] :: jQuery এর FadeIn FadeOut মেথড জানবো ও ব্যবহার করে দেখব](https://dnc.techtunes.io/tDrive/tuner/2018/04/techtunes_fee81aa370998cccf57ea2d7dc08eaa8-368x207.jpg "jQuery for Web Design [পর্ব-০৪] :: jQuery এর FadeIn FadeOut মেথড জানবো ও ব্যবহার করে দেখব")
![HTML, CSS, JS ও PHP ট্রেনিং সেন্টার [পর্ব-০৭] :: ওয়েব সাইটে আই ফ্রেম এর ব্যাবহার](https://dnc.techtunes.io/tDrive/tuner/mmkowshik2/149350/chaintune_html-css-js-and-php-tranning-center.jpg "HTML, CSS, JS ও PHP ট্রেনিং সেন্টার [পর্ব-০৭] :: ওয়েব সাইটে আই ফ্রেম এর ব্যাবহার")
very good but i want to know how to create a web site use HTML/XML,CSS, PHPMySQL,please give full tutorial