HTML সম্পর্কে স্বচ্ছ ধারনা তৈরি করে নিন এই টিউটোরিয়াল থেকে - ২য় অংশ

আগের টিউটোরিয়ায়লে আমরা শিখেছিলাম কিভাবে html এর প্রাথমিক গঠন তৈরি করা যায় এবং আমরা একটি করে heading, paragraph এবং button তৈরি করেছিলাম। এই টিউটোরিয়ালে আমরা কাস্টম স্টাইল অ্যাড করব, সেই সঙ্গে জাভাস্ক্রিপ্ট কোডের মাধ্যমে আমরা প্যারাগ্রাফ এলিমেন্টকে ওয়েবপেজ থেকে সরিয়ে দেব। চলুন শুরু করা যাক।

এলিমেন্টগুলির উপর কাস্টম স্টাইল অ্যাড করা

আমরা প্রথমে জেনে নেব কি কি উপায়ে কাস্টম স্টাইল অ্যাড করা যায়, তিনটি পদ্ধতিতে করা যায় যেমনঃ

১. ইনলাইন স্টাইল
২. এম্বেডেড স্টাইল
৩. এক্সটারনাল স্টাইল
আমরা এখানে এক্সটারনাল স্টাইল পদ্ধতি শিখব না কারন আমরা এই সম্পর্কে শিখব সিএসএস এর টিউটোরিয়াল এ, এখানে আমরা ১ ও ২ নং পদ্ধতিতে স্টাইল অ্যাড করা শিখব।

ইনলাইন স্টাইল প্রয়োগের উদাহরন

আমরা ইনলাইন স্টাইল এর উদাহরন হিসাবে আমাদের h1 ট্যাগের উপর স্টাইল যোগ করব এইভাবে,

<h1 style="font-family: Arial, Verdana; font-size: 36px;">... </h1>

এখানে দেখুন আমরা h1 tag এর পরে একটা স্পেস দিয়ে style অ্যাট্রিবিউট যোগ করে দিয়েছি এবং = সিম্বল এর পরে কোটেশন মার্কের ভেতরে css property এবং ভ্যালু দিয়েছি। তাহলে আমরা এখানে দেখলাম,

Style=”property: value;”

এখানে বলে রাখা ভাল যে css এর অনেক রকমের প্রপার্টি আছে যেমন font-family, color, background, font-size, font-weight, line-heigh ইত্যাদি। যেহেতু css এর প্রপার্টির সংখ্যা অনেক তাই পরবর্তী টিউটোরিয়ালে এই বিষয়ে আমরা আলোচনা করব।

যদিও এই পদ্ধতিতে কাস্টম স্টাইল অ্যাড করা যায় তবুও ওয়েব ডেভেলপররা এই পদ্ধতিতে নিজস্ব স্টাইল অ্যাড করেন না। কারন ওয়েব ডেভেলপারদের অনেক গুলি ফাইল নিয়ে কাজ করতে হয় তাই তারা ব্যবহার করেন এক্সটারনাল স্টাইল শীট। এই পদ্ধতিটা আপনাকে জানিয়ে রাখলাম এই কারনে যে এই পদ্ধতি গুলো জেনে রাখা ভাল আগে থেকেই।

এখন আপনি যদি ফাইলটিকে সেভ করে দিয়ে ব্রাউজারটিকে একবার রিলোড দেন তাহলে আপনি দেখতে পাবেন যে হেডিং এলিমেন্টে কিছুটা চেঞ্জ এসেছে, যেমন এর ফন্ট স্টাইল এর সঙ্গে সঙ্গে এর সাইজটাও আগের তুলনায় বেড়ে গেছে।

এম্বেডেড স্টাইল প্রয়োগের উদাহরন

আমরা এখন এমেবেডেড স্টাইল সম্পর্কে শিখব। সেজন্য আপনাকে head এলিমেন্টের ভেতরে title ট্যাগের শেষে আপনার মাউসের কার্সারটা রাখুন এবং এন্টার প্রেস করুন, তারপর নিচের ট্যাগটি টাইপ করুন,

<style>
</style>

এরপর এই স্টাইল ট্যাগের ভেতরে আপনি যে এলিমেন্টকে স্টাইল করতে চান সেটার ট্যাগ নেমটা লিখুন, যেমন আমাদের বডি ট্যাগটার নাম হিসাবে নিচে যেটা করা হয়েছে,

body {
 background-color: #f7f7f7;
 font-family: sans-serif;
 line-height: 1.7em;
}

এখানে দেখুন আপনি যে ট্যাগ নেমটা দিলেন এটাকে বলা হয়ে থাকে সিলেক্টর আর এটা শেষ হয় কার্লি ব্রেস দিয়ে।আমরা বডি এলিমেন্টের ব্যাকগ্রাউন্ড কালার করে দিয়েছি হালকা সাদা, ফন্ট-ফ্যামিলি দিয়েছি স্যান্স-সেরিফ এবং দুটি এলিমেন্টের মধ্যে যে লাইন হয় তার হাইট করে দিয়েছি ১.৭ ইএম আর এই বন্ধনীর মধ্যে থাকে css property এবং value. তাহলে এর গঠনটা হবে ঠিক নিচের মত,

selector {
 property: value;
}

এটা হয়ে যাবার পরে আমরা আমাদের বাটন এলিমেন্টকে কিছুটা ডিজাইন করব, এখানে দেখুন hideBtn এর জন্য আমরা # চিহ্ন দিয়েছি, কারন সিএসএসের ক্ষেত্রে id selector কে আমরা # চিহ্ন দিয়ে ব্যবহার করে থাকি।

#hideBtn {
 border: 1px solid black;
 background: red;
 font-size: 24px;
 border-radius: 5px;
 padding: 4px 10px;
}

আমাদের স্টাইলের কাজ শেষ, এখন আমরা জাভাস্ক্রিপ্ট ফাংশন তৈরি করা শুরু করছি।

জাভাস্ক্রিপ্ট

আগে প্ল্যান করে নিই আমাদের জাভাস্ক্রিপ্ট দিয়ে আমরা কি করতে চাচ্ছি। আমরা যখন বাটন এলিমেন্টে ক্লিক করব তখন একটি ফাংশন কল হবে, যার ফলে আমাদের প্যারাগ্রাফ এলিমেন্টে একটা স্টাইল অ্যাড হয়ে যাবে display: none.
চলুন শুরু করা যাক,

আমাদের আগে জাভাস্ক্রিপ্টের মাধ্যমে বাটন এলিমেন্টকে সিলেক্ট করতে হবে, কোন এলিমেন্টকে সিলেক্ট করবার জন্য বিভিন্ন রকমের কোড আছে। আমরা এখানে যেহেতু button-টায় id অ্যাট্রিবিউট অ্যাড করেছি তাই আমরা getElementById লিখে প্রথম বন্ধনীর ভেতরে ওই id টার নামে লিখব যেটা হল hideBtn. তাহলে আমাদের কোডটি হবে নিম্নরুপঃ

document.getElementById('hideBtn')

এরপরে আমরা একটি ডট চিহ্ন দিয়ে এর উপর একটি ইভেন্ট হ্যান্ডলার সংযুক্ত করব onclick. এই onclick করার অর্থ হচ্ছে আমরা যখন button টায় ক্লিক করব তখন এই মেথড টি আমাদের একটি ফাংশন কে কল করবে। এরপর আমরা একটি ইকুয়াল চিহ্ন দিয়ে লিখব function তারপর কার্লি ব্রেস দিয়ে দেব,

document.getElementById('hideBtn').onclick = function () {
    
}

এরপর ঐ কার্লি ব্রেসের মাঝে আমরা p এলিমেন্টকে সিলেক্ট করব getElementsByTagName(‘p’)[0] দিয়ে, যেখানে [0] করার অর্থ হচ্ছে যে জাভাস্ক্রিপ্ট array node এ 0 দিয়ে কোন এলিমেন্টকে স্টার্ট করে। আর এখানে যেহেতু প্যারাগ্রাফ এলিমেন্ট একটাই তাই। এরপর আমরা একটি ডট চিহ্ন দিয়ে লিখব style.displya = ‘none’.

document.getElementsByTagName('p')[0].style.display = 'none';

আমাদের জাভাস্ক্রিপ্ট কোড তৈরি, এখন আমাদের শুধু ব্রাউজার এ পরীক্ষা করে দেখতে হবে যে  এই কোড কাজ করছে কিনা। আপনি ফাইলটাকে সেভ করে দিয়ে ব্রাউজার এর রিলোড বাটনে ক্লিক করুন। তারপর hide বাটনে ক্লিক করলে দেখতে পাবেন আমাদের প্যারগ্রাফ এলিমেন্টটি ওয়েবপেজ থেকে হাওয়া হয়ে গেছে।

আপনি এই জাভাস্ক্রিপ্ট দিয়ে অনেক রকমের কাজ ব্রাউজারকে দিয়ে করাতে পারবেন, যেমনঃ
১. ঘড়ি,
২. স্লাইড শো অ্যানিমেশন,
৩. ক্লায়েন্ট সাইড ফর্ম ভ্যালিডেশন
৪. অ্যালার্ট মেসেজ শো করান,
৫. পপ আপ উইন্ডো,
৬. টেবিল অফ কন্টেন্ট,
৭. ডেট পিকার,
৮. ব্যাক টু টপ এফেক্ট,
৯. অ্যাকর্ডিয়ান,
১০. অটোকমপ্লিট ইত্যাদি।

আমরা আমাদের HTML, CSS এবং Javascript এর বেসিক টিউটোরিয়াল শেষ করে ফেলেছি। আমি যথাসাধ্য চেষ্টা করেছি আপানদের এই টিউটোরিয়াল শেখানোর, যদি আপনার কোথাও বুঝতে অসুবিধা হয় আপনি কমেন্ট বক্সে আপনার মুল্যবান কমেন্ট গুলি পোস্ট করতে পারেন। তাছাড়া আপনারা কি শিখতে চান এখানে কমেন্ট করতে পারেন। আমি অবশ্যই আমার ব্লগে লেখার চেষ্টা করব।

আমার এই টিউটোরিয়াল লেখা হয়েছে আপানদের নতুন কিছু শেখানোর, যাতে আপনারাও কিছু শিখতে পারেন। কথায় আছে শিক্ষার কোন শেষ নেই। আশা করি আপনি ভাল থাকবেন এবং আপনার পরিবারকেও ভাল রাখবেন। এখানেই আপনাকে টিউটোরিয়াল টা পড়াবার জন্য ধন্যবাদ বলে শেষ করছি।

ভিডিও টিউটোরিয়াল