আজকের টিউটোরিয়াল শুরু করার আগে আপনাদেরকে একটু সুন্দর সাইটের সাথে পরিচয় করিয়ে দিচ্ছি। আসলে পরবর্তী এইচটিএমএল / সিএসএস /জাভাস্ক্রিট নিয়ে টিউটোরিয়াল লিখলে এ সাইটটি ব্যবহার করব।
সাইটের ঠিকানা হচ্ছে http://jsfiddle.net/
এখানে গেলে এক সাথে চারটা বক্স/টেক্সট এরিয়া দেখবেন। লেখাই রয়েছে কোন বক্সের কাজ কি।
প্রথম টেক্সট এরিয়াতে এইচটিএমএল কোড লিখা যায়। তারপরেরটাতে সিএসএস এবং তৃতীয়টাতে লেখা যায় জাভাস্ক্রিপ্ট কোড। এবং শেষেরটা দেখা যায় ফলাফল। এখানে আমার সিম্পল একটা কোড লেখা রয়েছে। যেটা এর আগের টিউটোরিয়ালে উদাহরন হিসেবে ব্যবহার করেছি। http://jsfiddle.net/jakirseu/QXv2D/
Run এ ক্লিক করলে আমাদের ফলাফল দেখাবে।
প্রধান সুবিধে হচ্ছে আপনি কোড গুলোকে এখন পরিবর্তন করতে পারবেন। এবং এর পর রান এ ক্লি করলে আপনার পরিবর্তন এর ফলাফল দেখাবে। আর একটা একাউন্ট থাকলে সব গুলো সেভ করে রাখতে পারবেন।
আরেকটি প্রধান সুবিধে হচ্ছে আপনার যদি কোথাও বুঝতে সমস্যা হয় তাহলে সিনিয়র কাউকে লিঙ্ক দিয়ে বলতে পারেন আপনার সমস্যা সম্পর্কে। এবং তিনি আপনাকে সমাধান বের করে দিবে।
খেয়াল রাখতে হবেঃ এখানে শুধু মাত্র html এর কোড গুলো লিখলেই হবে। head tag / html tag ব্যবহার করার দরকার নেই।
বিদ্রঃ আমরা যেহেতু এখনো জাভাস্ক্রিপ্ট সম্পর্কে জানি না, তাই ঐখানে আমরা কিছুই লিখব না। যখন আমরা জাভা স্ক্রিপ্ট শিখব তখন তা নিয়ে আলোচনা করা যাবে। আপনারা ট্রাই করে দেখুন। আর আমি এখন থেকে প্রত্যেকটা উদাহরনের কোড গুলো এখানে দেওয়ার পাশা পাশি jsfiddle.net এর লিঙ্ক ও দেব যেন আপনারা সত্যিকারে কোড গুলো কিভাবে কাজ করে তা দেখতে পারেন। এবং নিজে নিজে পরিবর্তন করে দেখতে পারেন।
আমি আশা করব আপনারা নিজে নিজে কোড গুলো পরিবর্তন করে রান করিয়ে দেখবেন… Let’s Start!
এর আগের লেখা গুলোঃ
- সিএসএস টিউটোরিয়াল – সূচনা
- সিএসএস টিউটোরিয়াল – ID & Class
- সিএসএস টিউটোরিয়াল – সিএসএস ব্যাকগ্রাউন্ড ইমেজ এবং টেক্সট স্টাইলিং
আমরা এইচটিএমএল এ এইচটিএমএল লিঙ্ক সম্পর্কে জেনেছি। লিঙ্ক ছাড়া তো ওয়েবসাইটই অচল তাইনা? একটা পেইজ থেকে আরেকটা পেইজে যাওয়ার জন্য দরকার লিঙ্ক। আর একটা ওয়েবসাইটে অনেক গুলো লিঙ্ক থাকে। লিঙ্ক গুলোর সুন্দর ব্যবহারের উপর নির্ভর করে ওয়েব সাইটের সৌন্দর্য্য। এবার আমরা জানব কিভাবে এ লিঙ্ক গুলোকে আরো সুন্দর ভাবে দেখানো যায়।
একটা লিঙ্ক এর চার ধরনের অবস্থা হতে পারে।
- a:link – একটি সাধারন লিঙ্ক। যা এখনো ভিজিট করা হয় নি বা যাতে এখনো ক্লিক করা হয়নি।
- a:visited – একটি ভিজিটেড লিঙ্ক বা যে লিঙ্ক এ ক্লি করা হয়েছে।
- a:hover – আমরা সব সময়ই দেখি একটা লিঙ্ক এর উপর মাউস নিলে ঐ লিঙ্ক এর রঙ পরিবর্তন হয়ে যায়। hover হচ্ছে মাউস একটা লিঙ্ক এর উপর নেওয়ার পরের অবস্থা।
- a:active – একটা লিঙ্ক এ ক্লিক করে ধরে রাখা অবস্থা।
উপরের চার ধরনের অবস্থাতে আমরা চার ধরনের সিএসএস রুল ব্যবহার করতে পারি। যেমন সাধারন লিঙ্ক এর জন্য এক ধরনের রঙ, যে লিঙ্কটি ভিজিট হয়ে গেছে তাতে এক ধরনের রঙ hover এ এক ধরনের রঙ এবং ক্লিক করা অবস্থায় এক ধরনের রঙ।
নিচের কোড গুলো দেখুন. আর উদাহরনটি দেখতে চাইলে এখানে ক্লিক করে jsfiddel.net এ দেখতে পারবেন। এবং নিজে নিজে পরিবর্তন করে দেখতে পারবেন।
<!DOCTYPE html>
<html>
<head>
<style>
a:link {color:red;}
a:visited {color:green;}
a:hover {color:blue;}
a:active {color:yellow;}
</style>
</head>
<body>
<a href="#">click me, i will change my color</a>
</body>
</html>
এখানে দেখুন যে আমাদের লিঙ্কটির নিচে একটি আন্ডারলাইন এসেছে, আমরা চাইলে এটা বাদ দিতে পারি। তার জন্য লিখতে হবে text-decoration:none;
a:link {color:red;
text-decoration:none;
}
আবার চাইলে মাউসওবারের সময় আন্ডারলাইন দিতে পারি। তার জন্য hover এর সিএসএস রুলে লিখতে হবে text-decoration:underline;
a:hover {color:blue;
text-decoration:underline;
}
একটা লিঙ্ক এর পেছনে ব্যাকগ্রাউন্ড কালার ও ইচ্ছে করলে আমরা দিতে পারি। ব্যাকগ্রাউন্ড ইমেজও সেট করতে পারি। ফন্ট সাইজ ও সেট করতে পারি।