নতুনদের জন্য এইচটিএমএল, সিএসএস এবং জাভাস্ক্রিপ্ট

এই পোস্টে, আমি ব্যাখ্যা করছি যে এইচটিএমএল, সিএসএস এবং জাভাস্ক্রিপ্ট কী এবং ওয়েব অ্যাপ্লিকেশন তৈরি করার জন্য আপনাকে তিনটিই কেন দরকার।

আমি কিছু ওয়েব ডেভলপমেন্ট ফোরামে স্ক্রোল করার সময় আমি লক্ষ্য করেছি যে একের অধিক লোকের নিম্নলিখিত প্রশ্ন রয়েছে:

ওয়েব অ্যাপ্লিকেশন তৈরি করতে আমাকে কেন তিনটি ভাষা- এইচটিএমএল, সিএসএস, জাভাস্ক্রিপ্ট– শিখতে হবে?

প্রতিটি ভাষা তার নিজস্ব ভূমিকা পালন করে এবং সেখানে তার নিজস্ব নির্দিষ্ট ব্যবহারের ক্ষেত্রে রয়েছে। আমি যথাসম্ভব এর উত্তর দেওয়ার চেষ্টা করব এবং প্রতিটি ভাষা কী করে তা ব্যাখ্যা করব । 

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

এইচটিএমএল

এইচটিএমএল (হাইপারটেক্সট মার্কআপ ল্যাঙ্গুয়েজের জন্য সংক্ষিপ্ত) একটি ওয়েবসাইটের কঙ্কাল এবং এটি ওয়েব ব্রাউজারে লোড হওয়া প্রথম জিনিস।

এখানে ডেভেলপার ওয়েবসাইটটিতে কী এলিমেন্ট থাকতে হবে তা নির্ধারণ করে: বোতাম, চিত্র, পাঠ্য, লিঙ্কগুলি, ইত্যাদি । 

এখানে একটি সাধারণ এইচটিএমএল সাইটের উদাহরণ রয়েছে:

এটি কেবল ডিফাইন হবে একটি টাইটেল (ব্রাউজার ট্যাবে প্রদর্শিত হবে), একটি বড় টেক্সট, একটি সামান্য টেক্সট এবং একটি বাটন ।

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

সিএসএস

কিছু ডিজাইন উপরে কুরুচিপূর্ণ সাইটটি দেওয়ার জন্য, আমাদের এইচটিএমএল সাইটে সিএসএস (ক্যাসকেডিং স্টাইল শীট) কোড যুক্ত করা দরকার।

এটি একই HTML ফাইলটিতে করা যেতে পারে বা .css ফাইল থেকে লোড করা যায়। তবে এইচটিএমএলের অভ্যন্তরে সিএসএস লেখাই ভাল অনুশীলন নয়। এর জন্য আপনার সর্বদা একটি আলাদা ফাইল (বা আরও ফাইল) থাকা উচিত।

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

সাইটটি এখন আরও ভাল দেখাচ্ছে। তবে এমন শত শত সিএসএস বৈশিষ্ট্য রয়েছে যা সমস্ত বিভিন্ন HTML ট্যাগের জন্য সেট করা যায়। এটি এই ভাষায় আয়ত্ত করা কঠিন করে তোলে এবং সকলেই এতে ভাল নন। তবে বেসিকগুলি শিখতে এবং সামান্য অনুশীলনের মাধ্যমে শালীন কিছু পাওয়া সহজ।

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

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

আমাদের সাইটে এখন একটি কাঠামো এবং স্টাইলিং রয়েছে তবে ফাঙ্কশনালিটি অনুপস্থিত। উদাহরণস্বরূপ, অন্য কোনও ওয়েবসাইট থেকে ডেটা লোড করার সময় কোনও বোতামে ক্লিক করার সময়, ওয়েবসাইটটিতে টেক্সট পরিবর্তন করার সময়, আপনি জাভাস্ক্রিপ্টের সাহায্যে কল্পনাও করতে পারেন । 

এটি একটি আসল প্রোগ্রামিং ল্যাঙ্গুয়েজ যেখানে আপনার ফাংশন, ভেরিয়েবল, অ্যারে এবং অন্যান্য অনেক প্রোগ্রামিং সরঞ্জাম রয়েছে আপনার সাইটের মধ্যে “লজিক” তৈরি করতে।

আপনি কোনও ধরণের ফাঙ্কশনালিটি যুক্ত করতে চাইলে আপনি জাভাস্ক্রিপ্ট ব্যবহার করেন।

এই কোড স্নিপেট শুধুমাত্র একটি খুব সাধারণ ফাংশন যা শিরোনামের শিরোনামটিকে অন্য টেক্সটে পরিবর্তিত করে।

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

এজন্য সাম্প্রতিক বছরগুলিতে এটি এত ব্যাপক জনপ্রিয়। এমন আরও কয়েক মিলিয়ন জাভাস্ক্রিপ্ট লাইব্রেরি রয়েছে যা অন্যরা তৈরি করেছে যে আপনি নিজের প্রজেক্ট ব্যবহার করতে পারেন।

এটিকে আরও জটিল করে তুলতে: আপনি কেবল ব্রাউজারে নয়, সার্ভার-সাইড কোড (বা আপনার কম্পিউটারে স্থানীয়ভাবে চলমান কোড) লিখতে জাভাস্ক্রিপ্ট ব্যবহার করতে পারেন। এটিকে নোড.জেএস বলা হয় । 

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

তিনটি অংশই এক সাথে কাজ করে

আপনার তিনটি ভাষা জানা দরকার কারণ তারা এক সাথে কাজ করে। এইচটিএমএলে আপনি ক্লাস বা আইডি রয়েছে এমন এলিমেন্টগুলি ডিফাইন করতে পারেন, যা আপনি সিএসএস বা জাভাস্ক্রিপ্ট দিয়ে ম্যানিপুলেট করতে পারেন।

আপনি CSS এর সাহায্যে জাভাস্ক্রিপ্ট থেকে স্টাইল পরিবর্তন করতে পারেন। ওয়েবসাইটটি জাভাস্ক্রিপ্ট থেকে চলাকালীন আপনি সিএসএস ক্লাস পরিবর্তন করতে পারেন।

সারাংশ

আপনি যদি ওয়েব ডেভেলপার হয়ে উঠতে গুরুতর হন: হ্যাঁ, আপনাকে এই তিনটি ভাষা এবং আরও শিখতে হবে। আপনি যদি কোনও সার্ভারে চলমান কোডটি লিখতে চান তবে সম্ভবত এটির জন্য আপনার একটি বা অন্য ভাষা শেখার প্রয়োজন হবে (রুবি, পিএইচপি, পাইথন,…)

সংক্ষেপ:

এইচটিএমএল হ’ল কঙ্কাল

সিএসএস হ’ল এটি সুন্দর করে তোলা (কঙ্কালের উপর কাপড় এবং মেকআপ করা )

জাভাস্ক্রিপ্ট ফাঙ্কশনালিটি যুক্ত করে (কঙ্কালের সাথে মুভমেন্ট যোগ করা )