কেন সব ওয়েবসাইট গঠন, শৈলী, এবং আচরণের সংমিশ্রণ সঙ্গে নির্মিত হয়
একটি সাধারণ উপমা যা ফ্রন্ট-এন্ড ওয়েবসাইট ডেভেলপমেন্ট বর্ণনা করতে ব্যবহৃত হয় এটি একটি 3-লেজ স্টামের মত। এই 3 টি পা, যা ওয়েব ডেভেলপমেন্টের 3 স্তর হিসাবেও পরিচিত, গঠন, শৈলী এবং বিহাভিয়ার।
ওয়েব ডেভেলপমেন্টের তিন স্তরগুলি
- গঠন বা কন্টেন্ট স্তর
- একটি ওয়েব পৃষ্ঠার গঠন বা বিষয়বস্তু স্তর হল সেই পৃষ্ঠার অন্তর্নিহিত HTML কোড। একটি ঘর এর ফ্রেম মত একটি শক্তিশালী ভিত্তি তৈরি যা বাড়ির বাকি নির্মিত হয়, তাই এইচটিএমএল একটি কঠিন ভিত্তি করে একটি প্ল্যাটফর্ম তৈরি যা একটি ওয়েবসাইট তৈরি করা যাবে। এইচটিএমএল স্ট্রাকচার টেক্সট বা ইমেজ গঠিত হতে পারে এবং এটি দর্শক যে ওয়েব সাইট কাছাকাছি নেভিগেট করতে ব্যবহার করবে হাইপারলিংক অন্তর্ভুক্ত।
- স্টাইল বা উপস্থাপনা স্তর
- স্টাইল বা উপস্থাপনা স্তর নির্দেশ করে যে একটি স্ট্রাকচার্ড HTML ডকুমেন্ট কোনও সাইটের দর্শকদের কাছে কীভাবে দেখবে। এই স্তরে CSS (ক্যাসকেডিং স্টাইল শীট) দ্বারা সংজ্ঞায়িত করা হয়। এই ফাইলগুলির একটি শৈলী রয়েছে যা নির্দেশ করে যে একটি ওয়েব ব্রাউজারে দস্তাবেজ কীভাবে প্রদর্শিত হবে। আজকের ওয়েব এ, স্টাইল লেয়ারটি মিডিয়া প্রশ্নগুলি অন্তর্ভুক্ত করতে পারে যা বিভিন্ন স্ক্রিন মাপের এবং ডিভাইসগুলির উপর ভিত্তি করে একটি সাইট এর ডিসপ্লে পরিবর্তন করতে পারে।
- আচরণ
- আচরণ স্তর একটি ওয়েব পৃষ্ঠা স্তর যে বিভিন্ন ব্যবহারকারী কর্মের প্রতিক্রিয়া বা শর্ত একটি সেট উপর ভিত্তি করে একটি পৃষ্ঠায় পরিবর্তন করতে পারে। বেশীরভাগ ওয়েব পেজগুলির জন্য, আচরণের স্তরের পৃষ্ঠায় জাভাস্ক্রিপ্টের ইন্টারঅ্যাকশন হবে।
কেন আপনি স্তরের পৃথক করা উচিত?
যখন আপনি একটি ওয়েবপৃষ্ঠা তৈরি করছেন, তখন স্তরগুলিকে যতটা সম্ভব বিচ্ছিন্ন রাখতে হবে। স্ট্রাকচার আপনার এইচটিএমএল, ভিজ্যুয়াল স্টাইলগুলি সিএসএস-এ, এবং কোনও স্ক্রিপ্টের সাথে ব্যবহার করা উচিত যা সাইটটি ব্যবহার করে।
স্তরগুলি পৃথক করার কিছু সুবিধাগুলি হল:
- শেয়ার্ড সম্পদ
- যখন আপনি একটি বহিরাগত CSS ফাইল বা জাভাস্ক্রিপ্ট ফাইল লিখবেন, তখন আপনি যে ফাইলটি আপনার ওয়েব সাইটে কোনও পৃষ্ঠা দ্বারা ব্যবহার করতে পারবেন। যদি আপনি সেই ফাইলটিতে পরিবর্তন করতে চান, সম্ভবত ওয়েবসাইটে কিছু টাইপোগ্রাফিক শৈলী আপডেট করার জন্য, যে স্টাইলশীট ব্যবহার করে এমন প্রতিটি পৃষ্ঠা পরিবর্তন পাবেন। স্বতন্ত্রভাবে ওয়েবসাইটের প্রতিটি পৃষ্ঠা সম্পাদনা করার কোন প্রয়োজন নেই, যা বৃহত্তর সাইটের জন্য একটি নিদারুণ অঙ্গীকার হতে পারে।
- দ্রুত ডাউনলোড
- স্ক্রিপ্ট বা স্টাইলশীট একবার আপনার গ্রাহক দ্বারা প্রথমবার ডাউনলোড করা হয়েছে, এটি তাদের ওয়েব ব্রাউজার দ্বারা ক্যাশে করা হয়। যেহেতু এই ভাগ করা সম্পদগুলি এখন ক্যাশে অন্তর্ভুক্ত রয়েছে, ব্রাউজার লোডের অনুরোধ করা অন্যান্য পৃষ্ঠাগুলিকে আরও দ্রুতভাবে অনুরোধ করা হয়, যা সামগ্রিক পৃষ্ঠার গতি এবং কার্যকারিতা উন্নত করে।
- মাল্টি-ব্যক্তি দল
- আপনি যদি একাধিক ব্যক্তি একই সময়ে কোনও ওয়েব সাইটে কাজ করে থাকেন তবে আপনি এই ফাইলগুলির সর্বশেষ সংস্করণগুলির সাথে কাজ করতে পারেন কিনা তা নিশ্চিত করার জন্য আপনি "চেক ইন" এবং "চেক আউট" ফাইলগুলির জন্য সিস্টেমগুলি ব্যবহার করতে পারেন। শৈলী এবং আচরণ কাঠামোর নথির সাথে বিনিময় করা হয় তাহলে এটি করা অনেক কঠিন।
- এসইও
- একটি সাইট যা শৈলী এবং গঠন একটি বিচ্ছিন্নতা পরিষ্কার সার্চ ইঞ্জিনের জন্য ভাল সঞ্চালিত হতে পারে, কারণ ঐ সাইটগুলি আরও কার্যকরভাবে যে বিষয়বস্তু ক্রল এবং ভিজুয়াল শৈলী বা আচরণের তথ্য সঙ্গে ফাটল না করে পৃষ্ঠা বুঝতে পারে
- অভিগম্যতা
- বহিরাগত স্টাইল শীট এবং স্ক্রিপ্ট ফাইলগুলি মানুষ এবং ব্রাউজারে আরো অ্যাক্সেসযোগ্য। যেহেতু শৈলী এবং কাঠামোর বিচ্ছেদ আছে, স্ক্রিন রিডারগুলির মতো সফ্টওয়্যার আরও সহজভাবে স্ট্রাকচারের নিচে ফাঁকা না রেখে গঠন স্তর থেকে বিষয়বস্তু প্রক্রিয়া করতে পারে যে তারা যেকোনো উপায়ে ব্যবহার করতে পারে না।
- পূর্ববর্তী সংস্করণের সাথে সামঞ্জস্যপূর্ণ
- যখন আপনার ডেভেলপমেন্ট লেয়ারের সাথে ডিজাইন করা একটি সাইট থাকে, তখন এটি আরও পিছনে উপযুক্ত হবে কারণ ব্রাউজার বা ডিভাইস যা নির্দিষ্ট CSS স্টাইলগুলি ব্যবহার করতে পারে না বা যা জাভাস্ক্রিপ্ট নিষ্ক্রিয় অবস্থায় থাকতে পারে তা এখনও এইচটিএমএল দেখতে পারে আপনার ওয়েব সাইট ক্রমবর্ধমান ব্রাউজারের বৈশিষ্ট্যগুলির সাথে উন্নত করা যেতে পারে যা তাদের সমর্থন করে।
এইচটিএমএল - স্ট্রাকচার লেয়ার
গঠন স্তরটি হল যেখানে আপনি আপনার সমস্ত সামগ্রীগুলি সংরক্ষণ করেন যা আপনার গ্রাহকেরা পড়তে বা দেখতে চায়। এটি মান সম্মত HTML5 এ কোডেড করা হবে এবং এটি টেক্সট এবং ইমেজগুলি পাশাপাশি মাল্টিমিডিয়া (ভিডিও, অডিও, ইত্যাদি) অন্তর্ভুক্ত করতে পারে। এটি নিশ্চিত করা গুরুত্বপূর্ণ যে আপনার সাইটের বিষয়বস্তুগুলির প্রতিটি দিকটি গঠন স্তরে উপস্থাপিত হয়। এটি এমন কোনও গ্রাহকের অনুমতি দেয় যা জাভাস্ক্রিপ্ট বন্ধ করে দেয় বা যারা সম্পূর্ণ ওয়েব সাইটে অ্যাক্সেস করতে সিএসএস দেখতে পারে না, যদি সেই সাইটের সমস্ত কার্যকারিতা না থাকে
CSS - শৈলী স্তর
আপনি আপনার ওয়েবসাইটের জন্য একটি বাহ্যিক স্টাইল শীটের জন্য আপনার সমস্ত ভিজ্যুয়াল স্টাইল তৈরি করবেন। আপনি একাধিক স্টাইলশীট ব্যবহার করতে পারেন, তবে মনে রাখবেন প্রতিটি পৃথক CSS ফাইলে সাইটের পারফরম্যান্স প্রভাবিত করার জন্য একটি HTTP অনুরোধের প্রয়োজন।
জাভাস্ক্রিপ্ট - বিন্যাস লেয়ার
জাভাস্ক্রিপ্ট আচরণ স্তর জন্য সবচেয়ে বেশি ব্যবহৃত ভাষা, কিন্তু হিসাবে আমি আগে উল্লিখিত, CGI এবং পিএইচপি ওয়েব পেজ আচরণ তৈরি করতে পারেন। বলা হচ্ছে যে, অধিকাংশ ডেভেলপার আচরণ স্তর বোঝায়, তারা যে ওয়েব ব্রাউজার সরাসরি সক্রিয় হয় যে স্তর বলতে - তাই জাভাস্ক্রিপ্ট প্রায় সবসময় পছন্দ ভাষা। আপনি এই স্তরটি সরাসরি DOM বা ডকুমেন্ট অবজেক্ট মডেলের সাথে ইন্টারঅ্যাক্ট করার জন্য ব্যবহার করুন। আচরণ স্তর মধ্যে বৈধ এইচটিএমএল লেখার এছাড়াও আচরণ স্তর DOM মিথস্ক্রিয়া জন্য গুরুত্বপূর্ণ।
যখন আপনি আচরণ স্তর তৈরি করবেন, তখন আপনি কেবল CSS এর মত বাহ্যিক লিপি ফাইল ব্যবহার করতে পারবেন। আপনি একটি বহিরাগত স্টাইল শীট ব্যবহারের সব একই সুবিধা পাবেন।