এইচটিএমএল এবং সিএসএসের ক্লাসগুলির একটি পরিচিতি

এটি বলার অপেক্ষা রাখে না, ওয়েব বিকাশ বিশাল। এর একটি বড় অংশ হ'ল প্রায় সকলেই ওয়েবে। তবে এই ক্ষেত্রে বিকাশকারীদের ঘাটতি রয়েছে এবং সে কারণেই ওয়েব বিকাশ পাঠ্যক্রম এত সহজেই সহজলভ্য এবং বিনামূল্যেও পাওয়া যায়। এই বিষয়টি মাথায় রেখে, আমরা আপনাকে এইচটিএমএল এবং সিএসএস সম্পর্কে যা কিছু বলছি তা দেখাব। আরও সুনির্দিষ্টভাবে, আমরা আপনাকে দেখাব যে কীভাবে "ক্লাস" কাজ করে।

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

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

উপায়টি অতিক্রম করে, আসুন আমরা কি ক্লাসগুলি সম্পর্কে খনন করি।

ক্লাস কিভাবে কাজ করে

ক্লাসগুলি অত্যন্ত দরকারী। তারা স্টাইল এইচটিএমএল এর বাইরে পুনরাবৃত্তি। শ্রেণিবিহীন, আপনি পৃথকভাবে আপনার চিহ্নিতকরণের প্রতিটি উপাদান স্টাইল করা হবে। এবং যদি আপনার দুটি একই উপাদান থাকে তবে তাদের প্রত্যেককে আলাদাভাবে স্টাইল করতে চান? এটি একটি সম্পূর্ণ গণ্ডগোল হবে। সে কারণেই আমাদের ক্লাস রয়েছে। ক্লাসগুলি আপনার এইচটিএমএলকে কিছু সংস্থার কাঠামো যুক্ত করে, আপনাকে আপনার কোড তুলনামূলকভাবে পরিষ্কার রাখতে দেয়। শুধু তাই নয়, ক্লাসগুলি একাধিকবার ব্যবহার করা যেতে পারে। অন্য কথায়, আপনাকে আর কখনও একই স্টাইলিং বিধি তৈরি করতে হবে না।

ক্লাসগুলি আমাদের মধ্যে কী দেখতে লাগে তা এখানে ট্যাগ:

আপনি দেখতে পাচ্ছেন যে, আমাদের বডি ট্যাগের নীচে আমাদের দুটি আছে

বিভিন্ন শ্রেণীর সাথে উপাদান। প্রথম

ট্যাগটিতে "হেড 1" শ্রেণি রয়েছে যখন দ্বিতীয় ট্যাগটিতে ক্লাস "হেড 2" রয়েছে। সুতরাং, আমাদের সিএসএসে কেবল স্টাইলিং প্রয়োগ করার পরিবর্তে

উপাদান, আমরা সেই স্বতন্ত্র শ্রেণিতে স্টাইলিং প্রয়োগ করতে পারি। আমরা কেন এটি করতে চাই?

প্রাথমিক কারণ আপনি আপনার সমস্ত চান না

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

দস্তাবেজ জুড়ে ট্যাগ। সুতরাং, আপনি এইচটিএমএল একটি ক্লাস কিভাবে লিখবেন? এটার মত:

কিছু বিষয়বস্তু

আপনি প্রায় কোনও HTML উপাদানগুলিতে "শ্রেণি" বৈশিষ্ট্য যুক্ত করতে পারেন।

গ্রেট! সুতরাং, আমাদের ক্লাস রয়েছে, তবে তাদের বর্তমান অবস্থায় তারা আসলে কিছুই করছে না। কারণ আমরা এখনও ক্লাসে কোনও স্টাইলিং বিধি যুক্ত করি নি। এটি করতে, আমাদের একটি পৃথক .css ডকুমেন্ট তৈরি করতে হবে। আমি কেবল এটিকে main.css বলব। এই দস্তাবেজে, আমরা এর মতো একটি শ্রেণি স্টাইল করব:

আমরা স্টাইল করতে চাই এমন একটি ক্লাস নির্বাচন করতে, আমরা এটি করি:

.head1 {রঙ: লাল; পাঠ্য-সারিবদ্ধ: কেন্দ্র; }

কোঁকড়া ধনুর্বন্ধনী মধ্যে সমস্ত "নিয়ম" (বা স্টাইলিং) আমরা সেই শ্রেণিতে প্রয়োগ করি। এই শ্রেণীর ভিতরে আপনি রাখতে পারেন প্রচুর বিধিবিধান। আমার ক্ষেত্রে, আমি "রঙ" নিয়মটি ব্যবহার করে পাঠ্যের রঙকে লাল করে পরিবর্তন করেছি এবং আমি "পাঠ্য-প্রান্তিককরণ" নিয়মটি ব্যবহার করে পাঠ্যকে কেন্দ্র করেছিলাম। আপনি মজিলার বিকাশকারী নেটওয়ার্ক থেকে সিএসএস বিধিগুলির একটি সম্পূর্ণ তালিকা এবং তাদের ডকুমেন্টেশন খুঁজে পেতে পারেন।

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

আপনার এইচটিএমএল ডকুমেন্টটি দেখতে এমন হওয়া উচিত:

এবং আপনার আমাদের পরীক্ষার প্রকল্পটি ওয়েবে এটির মতো দেখা উচিত:

এই ধাপগুলি অনুসরণ করে এমন আরও বিশদ ভিডিওর জন্য, নীচে দেখুন।

ভিডিও

উপসংহার

এবং এখানে ক্লাস আছে সব! তারা বুঝতে খুব সহজ। স্পষ্টতই আপনি যে বড় এবং জনপ্রিয় ওয়েবসাইটগুলি পরিদর্শন করেন সেগুলিতে, ক্লাসগুলির মধ্যে থাকা বিধিগুলি আমাদের আচ্ছাদিত বিষয়গুলির চেয়ে সম্পূর্ণ জটিল, তবে তাদের সবচেয়ে মৌলিক আকারে, তারা এভাবেই কাজ করে।

আপনার যদি কোনও প্রশ্ন থাকে বা দীর্ঘক্ষণ অনুসরণ করতে সমস্যা হয় তবে অবশ্যই পিসিমেচ ফোরামে নীচে বা তারপরে মন্তব্য করে আমাদের জানান! অথবা, আপনি যদি পিসিমেচে একটি সম্পূর্ণ এইচটিএমএল / সিএসএস সূচনা গাইডে আগ্রহী হন তবে আমাদেরও তা নিশ্চিত করে জানান!