এইচটিএমএল, সিএসএস এবং জাভাস্ক্রিপ্টের মধ্যে পার্থক্য কী?

HTML, CSS এবং JavaScript এর মধ্যে পার্থক্য সম্পর্কে জানুন।

আপনি যখন ওয়েব ডেভেলপমেন্ট সম্পর্কে শেখা শুরু করেন, বিশেষ করে ফ্রন্ট-এন্ড ডেভেলপমেন্ট, HTML, CSS এবং JavaScriptকে আপনার দক্ষতা স্ট্যাকের 3টি মৌলিক উপাদান হিসেবে বিবেচনা করা হয়।

HTML, CSS, এবং JavaScript হল একই ওয়েব ডেভেলপমেন্ট ইকো-সিস্টেমের অংশ এবং আধুনিক ওয়েবের সম্ভাব্যতাকে সর্বাধিক করার জন্য একসাথে কাজ করতে হবে।

কিন্তু... এইচটিএমএল, সিএসএস এবং জাভাস্ক্রিপ্টকে ঠিক কী একে অপরের থেকে আলাদা করে?

HTML মানে হাইপারটেক্সট মার্কআপ ল্যাঙ্গুয়েজ।
CSS মানে ক্যাসকেডিং স্টাইলশীট
জাভাস্ক্রিপ্ট মানে... ভাল জাভাস্ক্রিপ্ট (শর্টকাট JS )

HTML

এইচটিএমএল হল একটি মার্কআপ ভাষা যা আমরা এর বিষয়বস্তু বর্ণনা করতে ব্যবহার করি এবং একটি ওয়েবসাইটের মৌলিক রুক্ষ কাঠামো লেআউট করি।

সাদৃশ্য: HTML হল একটি বাড়ির ফ্রেম এবং বিষয়বস্তু। তাই চেয়ার, টেবিল, দরজা, সিঁড়ি, ঘরের জন্য প্রয়োজনীয় জিনিস, এর বেশি কিছু নয়।

এইচটিএমএল ডেভেলপারদের কাজ হল ওয়েবসাইটের বিষয়বস্তু সঠিকভাবে বর্ণনা করে একটি ওয়েবসাইটের নূন্যতম প্রয়োজনীয়তাগুলি সরবরাহ করা যাতে ডিজাইনাররা আসে, তারা বোতাম কী এবং অনুচ্ছেদ কী তা জানে৷

উদাহরণ:

<!-- Describe content -->

<p>This text is described correctly by wrapping it between opening and closing paragraph tags.</p>

<button>I’m a button</button>

CSS

CSS হল একটি স্টাইলিং ভাষা যা আমরা রঙ, টাইপোগ্রাফি, ব্যবধান, সীমানা এবং আরও অনেক কিছুর পরিপ্রেক্ষিতে ওয়েবসাইট বিষয়বস্তুকে আকৃতি ও স্টাইল করতে ব্যবহার করি।

সাদৃশ্য: CSS হল একটি বাড়ির পেইন্ট এবং বৃত্তাকার প্রান্ত যা দৃশ্যত আকর্ষণীয় এবং বসবাসের জন্য আরামদায়ক করে তোলে। প্রযুক্তিগতভাবে, একটি চেয়ারের সংজ্ঞা হল এমন কিছু যা আপনি বসেন, কিন্তু আকৃতি, আকার এবং প্যাডিং (ডিজাইন) এর মতো জিনিসগুলি যা তৈরি করে বসার জন্য আরামদায়ক (বা অস্বস্তিকর) চেয়ার।

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

উদাহরণ:

/* Style text element */
p {
	font-family: "Helvetica";
	font-size: 20px;
	line-height: 1.5;
}

/* Style button */
button {
	font-size: 16px;
	font-weight: bold;
	padding: 16px 32px;
	border-radius: 8px;
	color: white;
	background-color: green;
}

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

জাভাস্ক্রিপ্ট একটি গতিশীল প্রোগ্রামিং ভাষা যা আপনাকে ওয়েবসাইটগুলিকে ইন্টারেক্টিভ এবং প্রতিক্রিয়াশীল করতে দেয়।

সাদৃশ্য: জাভাস্ক্রিপ্ট হল বিদ্যুৎ এবং জল সরবরাহ যা একটি আধুনিক বাড়িকে একটি আধুনিক বাড়ি করে তোলে এবং শীতকালে স্নান করা, খাবার রান্না করা এবং ঠান্ডায় মৃত্যু না হওয়া সম্ভব করে তোলে। একজন জাভাস্ক্রিপ্ট বিকাশকারী নিশ্চিত করুন যে আপনি যখন সুইচটি ফ্লিপ করেন তখন আলো জ্বলে এবং আপনি যখন জলের কলটি চালু করেন তখন গরম/ঠান্ডা জল বেরিয়ে আসে।

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

উদাহরণ:

// Make button interactive 

const button = document.querySelector("button")

button.addEventListener("click", showModal)

function showModal() {
	alert("You clicked on the button!")
}