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