Code 'n Science

সার্চ করুন | Search here

Ads | বিজ্ঞাপন

Wednesday, May 15, 2019

বুধ গ্রহে আমাদের জয়নুল আবেদিন

শিল্পাচার্য জয়নুল আবেদিন।তাকে বলা হয় বাংলাদেশের আধুনিক চিত্রশিল্পের জনক। তার হাতে আকা চিত্রের দ্বারা ১৯৪৩ সালের দুর্ভিক্ষ এর করুণ পরিস্থিতি তুলে ধরার জন্য তিনি বিখ্যাত। বাংলার সেই ভয়াবহ দুর্ভিক্ষে প্রায় ২১ লাখ মানুষ প্রাণ হারিয়েছিলেন। সব মিলিয়ে তিনি প্রায় তিন হাজারের বেশি চিত্রকর্ম একেছেন।১৯১৪ সালের ২৯শে ডিসেম্বর তিনি ময়মনসিংহ জেলায় জন্ম গ্রহণ করেন। আর ১৯৭৬ সালের ২৮শে মে তিনি ঢাকায় মৃত্যুবরণ করেন। অসামান্য প্রতিভাত স্বীকৃতি স্বরূপ তার নাম জড়িয়ে গেছে মহাকাশেও। অনেকের হয়ত জানা নেই যে তার নামে সুর্যের নিকটতম গ্রহের একটি ক্রাটার এর নাম দেওয়া হয়েছে আবেদিন। ২০০৮ সালে পাঠানো মেসেঞ্জার (MESSENGER) যানটি উড়ে যায় বুধ গ্রহের পাশ দিয়ে।একে বলে ফ্লাইবাই।বুধ গ্রহের জন্য তথ্য সংগ্রহের জন্য যানটিকে পাঠানো হয়েছিল ২০০৪ সালে।গ্রহটির কক্ষপথে প্রদক্ষিণ শুরু করার আগে এটি পৃথিবীকে একবার,শুক্রকে দুবার ও বুধকে তিনবার ফ্লাইবাই করে।।এসময় যানটি গ্রহের উত্তর অঞ্চলে অনেকগুলা ক্রাটার আবিষ্কার করে। এইগুলো ধুমকেতুর আঘাতে হয়েছে।



আবিষ্কৃত ক্রাটারের ভিতর অন্যতম বড় একটা ক্রাটারের নাম দেওয়া হয়েছে আবেদিন।২০০৯ সালের ৯ জুলাই আন্তর্জাতিক জ্যোতির্বিজ্ঞান ইউনিয়ন (IAU) নামটি অনুমোদন করে।ক্রাটারটি ৬৮ মাইল চওড়া। এর কেন্দ্রিয় অংশের একটি অংশ বেশ বড় হয়ে আছে। এর ভিতরের খাদটি মসৃণ, যা একে অন্যান্য। ক্রাটার হতে স্বতন্ত্র করেছে।

IAU এর নিয়মানুসারে বুধের নতুন আবিষ্কৃত প্রতিটি ক্রাটারের নাম এমন কোন লেখক গায়ক চিত্রকর বা শিল্পীর নামে হবে যিনি ৫০ বছরের বেশি সময় ধরে বিখ্যাত ছিলেন।আর ক্রাটারের নাম করণের অন্তত তিন বছর আগে মারা গেছেন।

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

১৯১৯ সালে প্রতিষ্ঠিত হওয়ার পর হতেই মহাকাশের বিভিন্ন গ্রহ ও উপগ্রহ বিষয়ক বিভিন্ন জিনিসের সংগায়ন ও নাম করণ করছে আন্তর্জাতিক জ্যোতির্বিজ্ঞান সমিতি।

সুত্র:- NASA, Lightsinthe dark.com, Wikipedia






নতুন কৃত্রিম হৃদপিন্ড...


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

মানুষ হার্টের সফল ভাবে পেসমেকারের সফল ইউজ করা শিখেছে কেবল ৬০ বছর হল। আর প্রথমবার সফল ভাবে হার্ট প্রতিস্থাপন করা হয়েছে ৫০ বছর আগে। সেই তুলনায় কৃত্রিম হার্টের এই প্রযুক্তি বলতে গেলে এখন শৈশবকালকাল অতিক্রম করছে।

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



অন্যদিকে এই হার্টে কোন যান্ত্রিক পাম্প ইউজ করা হয় নাই। বরং অতিরিক্ত আরেকটি চেম্বার যোগ করা হয়।ফলে প্রচলিত পদ্ধতির সমস্যাগুলো দূর হয়। এই নতুনন হার্টে ছাপযুক্ত বাতাসের সাহায্যে এর চেম্বারকে পর্যায়ক্রমে ফোলানো ও চুপসানো হয়। ফলে এটি আসল হার্টের মতই সংকোচন ও প্রসারণ তৈরী করে।এর মাধম্যে নতুন হার্টটি তে প্রায় বাস্তব স্পন্দন তৈরী করা সম্ভব হয়।

গবেষক দলের সদস্য নিকোলাস কোর্জ বলেন,
আমাদের লক্ষ্য একটি কৃত্রিম হার্ট তৈরী করা, যে হার্টের আকার আকৃতি মোটামুটি ভাবে রোগীর আসল হার্টের মতই হবে।কাজের দিক হতেই আসল হার্টের মতই কাজ করবে।

কোর্জ ও তার দল যে হার্ট তৈরী করছেন ইতোমধ্যে তা সফলভাবে কাজ করতে শুরু করছে।তবে সেটি মাত্র ৩০০০ বিট পর্যন্ত চালু থাকতে পারে।অর্থাৎ আধা ঘন্টার হতে পৌনে এক ঘন্টার মত হার্টটি সচল থাকে।এর ভর ৩৯০ গ্রাম।এ ব্যাপারে কোর্জ বলেন
এটি একটি পরিক্ষামূলক হৃদপিন্ড ছিল।
যা হোক আমরা চিন্তা করছি কৃত্রিম হার্ট গবেষণায় নতুন একটি দিগন্ত উন্মোচন করবে।

সুত্র :- BBC EARTH

প্রথম আন্তঃনাক্ষত্রিক গ্রহাণু আমাদের সৌরজগতে...


১৭ অক্টোবর ২০১৭। হাওয়াই দ্বিপপুঞ্জে অবস্থিত ইউনিভার্সিটি অব হাওয়াইয়ের প্যান-স্টারস-১ টেলিস্কোপে ধরা পড়ে একটা আবছা আলো। সেটা ক্রমেই পৃথিবী হতে দূরে সরে যাচ্ছে।এই আলোর উৎসের খোজে নামের বিজ্ঞানীরা। খোজ পান এমন এক গ্রহাণুর যেটা একেবারে অপরিচিতি। ধুমকেতুও হতে পারে সেটা। বিজ্ঞানীরা সেটার আনুষ্ঠানিক নাম দেন 11/2017/U1| প্যান স্টারস টিমের বিজ্ঞানীরা এর নাম দেন ওউমুয়ামুয়া। এটি একটি হাওয়াইয়ান শব্দ হতে এসেছে যার অর্থ স্কাউট। বিজ্ঞানীরা হিসাব কষে দেখছেন যে এর জন্ম সৌরজগতের বাহিরে। বাইরের কোন নক্ষত্র জগৎ হতে বেড়াতে এসেছে৷ এর আগে কোন বাহিরের নক্ষত্রের খোজ পান নি বিজ্ঞানীরা৷


সৌরজগতে এই আগন্তুক বিজ্ঞানীদের মাঝে সাড়া ফেলেছিল। পৃথিবীর সব বড় বড় টেলিস্কোপ এর দিকে তাক করা হয়েছিল যাতে করে এর সম্পর্কে ভাল মত জানা যায়। বিজ্ঞানীদের চোখ আকাশে তুলে দিয়েছে এর আকৃতি। এর দৈর্ঘ্য ৩০০ মিটার ও প্রস্থ ৩০ মিটার।অনেকটা পেন্সিলের মত দেখতে। এর আগে পর্যবেক্ষণ করা গ্রহাণুর ভিতর কোনটিরই দৈর্ঘ্য প্রস্থের চেয়ে তিন গুনের বেশি বড় ছিল না। এর গায়ের রঙ দেখে বিজ্ঞানীরা নিশ্চিত হয়েছেন যে কয়েকলাখ বছর ধরে এর গায়ে মহাজাগতিকরশ্মি এসে পড়েছে। অর্থাৎ সৌরজগতে পৌছানোর আভে বেশ লম্বা একটা পথ পাড়ি দিতে হয়েছে একে। আন্তঃনাক্ষত্রিক গ্রহাণু নিয়ে বিজ্ঞানীদের ধারণা ছিলো আগে থেকেই। কিছু তত্ত্বও প্রতিষ্ঠিত হয়েছিলো এর উপর। তবে বিজ্ঞানীরা এই প্রথমই এই ধরণের গ্রহাণু পর্যবেক্ষণ করলেন।বিজ্ঞানীরা যেমন ধারণা করেছিলেন এটি তার চেয়ে বেশি ঘন।আর এটি প্রথম পর্যবেক্ষণের তিন দিন আগে, অক্টোবরের ১৫ তারিখে এটি সুর্যের সবচেয়ে কাছাকাছি ছিল। এর আগে ৯ সেপ্টেম্বর এটি সুর্যের সবচেয়ে কাছ দিয়ে উড়ে যায়। বর্তমানে সেকেন্ডে প্রায় ৪৯ কি.মি./ সেকেন্ড গতিতে ছুটে যাচ্ছে এটি। এর গতিপথ ও বেগ দেখে ধারণা করা হচ্ছে লইরা নক্ষত্রপুঞ্জ এর ভেগা নক্ষত্রের কাছে এর জন্ম।


আগন্তুক গ্রহাণুর গঠন বা উৎপত্তি নিয়ে কিছুই জানা যায় নি৷ জানুয়ারি ২০১৮ তে এটি বৃহস্পতি গ্রহকে ফ্লাইবাই করে। জানুয়ারি ২০১৯ এ এটি শনি গ্রহকে ফ্লাইবাই করে। এটি আস্তে আস্তে সৌরজগতের বাহিরের দিকে চলে যাচ্ছে।
বিজ্ঞানীরা পরে এরকম আরো গ্রহাণু খুজে পাবেন বলে আশা করছেন৷
সুত্রঃ নাসা

উচ্চ চাপেও অতিপরিবাহী...


সুপারকন্ডাকটিভিটি বা অতিপরিবাহিতা পদার্থের এক বিস্ময়কর ধর্ম।নির্দিষ্ট তাপমাত্রায় কোন বস্তু অতিপরিবাহিতা দেখায়। ঐ সময় ঐ পদার্থের ক্ষেত্রে কোন রোধ কাজ করে না বিদ্যুৎ দিলে।অতিপরিবাহিতার ধারণা খুব বেশি দিনের না হলেও এ বিষয়ে প্রচুর গবেষণা করা হচ্ছে।

বর্তমানে বিভিন্ন সংকর ধাতুর অতিপরিবাহী বানানো হচ্ছে। অতিপরিবাহিতা অবশ্য ধরে রাখা খুবই কঠিন। খুবই কম তাপমাত্রায় অতিপরিবাহীতা প্রদর্শিত হয়, প্রায় পরম শূন্য তাপমাত্রায়। এত দিনে ধারণা করা হত খুব বেশি চাপে অতিপরিবাহিতা নষ্ট হয়ে যায়। গত ২৮ জানুয়ারি
পি এন এ এস জার্নাল
-এ চাইনিজ একাডেমি অব সাইন্সের বিজ্ঞানীরা জানিয়েছেন, তারা এমন একটি নতুন সংকর ধাতু বানিয়েছেন যা কিনা উচ্চ চাপে অতিপরিবাহিতা দেখায়। তারা দেখান ১৯০ গিগা প্যাসকেলেও ঐ সংকর ধাতু অতিপরিবাহিতা দেখায়। এই চাপ বায়ুমন্ডলীয় চাপের প্রায় ২০ লাখ গুণ। ধারণা করা হচ্ছে - বিশেষ অবস্থায় অতিপরিবাহিতার এই ধর্ম ব্যবহার করে নতুন দিগন্ত উন্মোচিত হবে।


সুত্রঃPNAS Journal

আয়োডিন লবণ কেন খাবেন? জেনে নিন কিছু কারণ




বিশ্বাস করুন আর না-ই করুন আমেরিকায় আয়োডিনযুক্ত লবন সাধারন দোকানে পাওয়া যায় না।সেখানে লবনে আয়োডিন যুক্ত করা হয় না।তাদের দরকার ও হয় না।একজন প্রবাসী বাঙালি এটা দেখে শুনে অবাক হন।অনেক খুজে বেশি দামে আয়োডিনযুক্ত লবন কনেন এই প্রবাসিরা।কিন্তুু খেতে বিস্বাদ,যেহেতু বাংলাদেশে আয়োডিনযুক্ত লবন খেতে হয়,তাই তিনি দুঃচিন্তায় ছিলেন।কিন্তুু পরে দ্যা নিউইয়র্ক টাইমস পত্রিকায় ২১শে জুলাই ২০১৭ইং, এ বিষয়ে একটি লেখা পড়ে জানলেন,কেন ইউরোপ আমেরিকায় লবনে আয়োডিন লাগেনা।তাহলে,বাংলাদেশে কেন লাগে।কারন আমাদের দেশে বন্যা হয়।আমেরিকা ইউরোপ এই দুর্যোগ খুবই কম।



প্রশ্ন হল বন্যার সাথে আয়োডিনের সম্পর্ক কি?

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

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

তাই সেখান হতেও আয়োডিন পাই না। বাংলাদেশের মতো আরো অনেক বন্যা প্রবণ দেশে আয়োডিনের ঘাতটি একটি বড় সমস্যা। এর জন্য আগে আমাদের দেশের বিশেষ করে উত্তরাঞ্চলে গলগন্ড রোগ ব্যাপক আকারে দেখা যেত।তখন আয়োডিন যুক্ত লবণ খাওয়ার চল হয়। এখন প্রশ্ন আয়োডিন লবণে কেন? অন্য কিছুতেও তো দিতে পারত? এর উত্তর হল - লবণ হল এমন একটা জিনিস যা আমরা প্রতিদিন খাই। লবণের মত চিনি আমরা প্রতিদিন খাই না। তাই পরে আইন করে লবণে আয়োডিন মেশানোর প্রচলন করা হয়।

Tuesday, May 14, 2019

শীতকালে গাড়ির কাচের জানালা বন্ধ করে যাচ্ছেন না তো?





আমাদের দেশ সহ অনেক দেশে হয়ত অনেকে গাড়িতে শিশু সন্তান রেখে গেছেন কেনাকাটা করতে। ভেবেছেন ১০-১৫ মিনিটের ভিতরই ফিরে আসবেন। জানালাগুলা বন্ধ ও দরজা লক করা। কিছুক্ষণ পরে এসে দেখলেন হয়ত বিরাট বিপর্যয় ঘটে গেছে। গরমে সন্তানের জীবন বিপন্ন। কারম আমরা জানি যে রোদে কাচ বন্ধ করে গাড়ি পার্ক করে রাখলে ভেতরের অংশ খুবই দ্রুত তপ্ত হয়ে উঠে।এর কারণ হল সুর্যের আলোর তরঙ দৈর্ঘ্য কম। সহজেই কাচের ভিতর দিয়ে গাড়ির ভিতর ঢুকে পড়ে। এর কিছু অংশ আবার প্রতিফলিত হয়ে আলোক তরঙের আকারেই কাচের ভিতর দিয়েই বের হয়ে আসে। কিন্তু আলোক শক্তির বাকি অংশ গাড়ির সিট ও অন্যান্য অংশ শুষে নেয়। এরপর তা তাপ আকারে বের হয়। কিন্তু এই ইনফ্রারেড তাপের তরঙ্গের দৈর্ঘ্য তুলনামূলক ভাবে বেশি হওয়ায় কাচ দিয়ে বের হতে পারে না৷ ফলে গাড়ির ভেতরের অংশ খুবই দ্রুত তপ্ত হয়ে উঠে।সরাসরি রোদে রাখলে মাত্র ১০ মিনিটে গাড়ির ভেতরের তাপমাত্রা বেড়ে ৪৫-৫০ ডিগ্রি সেলসিয়াস হতে পারে!




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



আপনিও হোন এলিয়েন...






মানুষের

আজন্ম লালিত প্রশ্ন -মহাবিশ্বে কি আমিরা একা? সুদুই ঐ আকাশে কি কোন বুদ্ধিমান প্রাণী আছে কি? থাকলে তারাও কি আমাদের মত করে এমন ভাবছে? কে জানে। কিন্তু যদি সত্যই কেউ থেকে থাকে ও আমাদের মত করে ভাবে তাহলে তাদের সাথে যোগাযোগ করাই লাগে। আর যোগাযোগ করতে হলে একটা সুত্র তো চাই৷।

১৯৭৭ সালের ৫ই সেপ্টেম্বর। দুরের ঐ মহাকাশকে জানার জন্য এবং একই সাথে মানব জাতির অস্তিত্ব কে মহাশূন্যকে জানানোর জন্য পাঠানো হয়

ভয়েজার-১

নামের এক যুগান্তকারী অনুসন্ধানী যান।তার মাত্র ১৬ দিন আগে পাঠানো হয়

ভয়েজার-২

নামের একই রকমের যান৷ বর্তমানে সবচেয়ে বেশি তথ্য প্রদানের মুকুট এই ভয়েজারেই। তবে পরে যাত্রা করলেও ভয়েজার-১ ই সবচেয়ে দুরের যান পৃথিবী হতে৷ এটি বৃহস্পতি, শনি ও শনির উপগ্রহ টাইটানের পাশ দিয়ে উড়ে যায়। এ সময় এটি গ্রহ দুটির উপগ্রহগুলোর বিস্তারিত ছবি তুলতে সক্ষম হয়।

অন্যদিকে

ভয়েজার-২

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



অবশেষে দুটো যানই সৌরজগত হতে বের হওয়ার জন্য প্রয়োজনীয় মুক্তিবেগ অর্জন করে। ২০১২ সালে ভয়েজার-১ প্রবেশ করে আন্তনাক্ষত্রিক জগতে। একই কাজ করতে যাচ্ছে অপর যানটিও।
মহাকাশের সম্ভাব্য বুদ্ধিমান প্রাণীদের সাথে যোগাযোগ করার জন্য যান দুটির সাথে নাসা যুক্ত করে

গোল্ডেন রেকর্ড

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

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

সুত্র- নিউইয়র্ক পোস্ট, উইকিপিডিয়া



Monday, May 13, 2019

কোয়ান্টাম বলবিজ্ঞান | পার্ট-১


দ্বি-চির পরীক্ষা ও কণা তরঙের বহু রূপ:--




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

থমাস ইয়ং ১৮০১ সালে প্রথম এই পরিক্ষাটা করেন। তবে তখন এর গুরুত্ব বুঝা যায় নাই। পরে ১৯২৪ সালে ডি ব্রগলি প্রমান করেন সব জড় পদার্থই তরঙের মত আচরণ করতে পারে।



হাজেনবার্গের অনিশ্চয়তা নীতি


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

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

যেমন:- বেগের অনিশ্চয়তা কমিয়ে অর্ধেক করতে চাইলে অবস্থানের অনিশ্চয়তা হয়ে যাবে দ্বিগুণ।





মাল্টিভার্স বা বহুবিশ্ব

কোয়ান্টাম বলবিদ্যায় একই বস্তু একই সাথে একাধিক স্থানে থাকতে পারে। ব্যাপারটা সত্যি তাক লাগানোর মত। উপরুন্ত কোন বস্তুকে নিশ্চিত করে বলার উপায় নাই। কোন ঘটনা ঘটবে কি না তা নিশ্চিত করে বলা যায় না। বলা যায় মাত্র সম্ভাবনাটুকু।

তবে কোয়ান্টাম মেকানিকস এ এর একটি সহজ সমাধান আছে।এটি দিয়েছেন হিউগ এভারেট সেটা এখানে দেওয়া হল:-

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




ম্যাট্রিক্স বলবিদ্যা


কোয়ান্টাম বলবিদ্যার প্রথম গ্রহণযোগ্য সংজ্ঞায়নের নাম ম্যাট্রিক্স বলবিদ্যা। ভৌত বস্তুর বৈশিষ্ট্য ব্যাখ্যায় এটি এক অভিনব উপায়ের আশ্রয় নেয়। কণার ভৌত ধর্ম ব্যাখ্যা করা হয় এর সাহায্যে। ম্যাট্রিক্সএর উপাদান গুলো সময়ের সাথে সাথে বদলে যায়। উল্লেখ্য গণিতের ভাষায় আয়তাকার কলাম ও সারিতে সাজানো একগুচ্ছ সংখ্যা বা প্রতিককে বলে ম্যাট্রিক্স। তত্ত্বটির আবির্ভাব হয় তিন জন বিজ্ঞানীর হাতে। তারা হলেন হাজেনবার্গ,ম্যাক্স বর্ন, ও প্যাসকেল জর্ডান। এই তত্ত্বের কিছু ধারণার উপর ভিত্তি করে ১৯২৬ সালে পাউলি হাইড্রোজেন পরমাণুর বর্ণালির বিবরণ দেন।




ধন্যবাদ আজ এই পর্যন্তই। কোয়ান্টাম তত্ত্বের বাকি অংশ পোস্ট করা হবে আগামী কোন পোস্টে।









Thursday, April 25, 2019

নিষ্ক্রিয় গ্যাস "ক্রিপ্টন" এর ইতিহাস।









১৮৯৮ সালের কথা। নিষ্ক্রিয় গ্যাস নিয়ে পরীক্ষা চালাচ্ছিলেন লন্ডনের ইউনিভার্সিটি কলেজের রসায়নববিদ স্যার উইলিয়াম র‍্যামসে।
এর আগে তিনি আর্গন গ্যাস আবিষ্কার করেছেন, বিশ্লিষ্ট করছেন হিলিয়াম গ্যাস। তাতে বিজ্ঞানী মহলে বেশ পরিচিত তিনি। তিনি দেখতে পারেন মৌলের একটি গ্রুপের ধর্ম প্রায় একই রকম। তো তিনি নিষ্ক্রয় গ্যাসের গ্রুপে আরো কিছু গ্যাস অনাবিষ্কৃত থাকতে পারে বলে সন্দেহ করলেন। তাই তিনি তার এক সহকর্মীর সাথে আর্গন গ্যাস নিয়ে আরো পরীক্ষা - নিরিক্ষা করতে লাগলেন।


প্রথমেই বাতাস হতে বাতাস হতে অক্সিজেন, নাইট্রোজেন ও কার্বন ডাই অক্সাইড গ্যাস আলাদা করা হল। গ্যাসটিকে তরল করে বাষ্পীভূত করে তারা দেখতে চাইলেন তাতে আর কোন মৌল পাওয়া যায় কি না। তাদের চেষ্টা শেষ পর্যন্ত সফল হয়েছিল। প্রায় ১৫ লিটার আর্গন গ্যাস হয়ে তারা অন্য আরেকটি গ্যাস পেলেন। পারমাণবিক বর্ণালি বা স্প্রেকট্রোমিটার দিয়ে গ্যাসের উপর পরিক্ষা চালান হল। তাতে কমলা আর সবুজ রেখা পাওয়া গেল, যা সে।সময়ের জানা থাকা অন্য গ্যাসের সাথে মিলে না। তাতে র‍্যামসে ও তার সহকর্মী মরিস ট্রাভার্স বুঝলেন তারা নতুন একটা গ্যাস আবিষ্কার করছেন। । এবার নাম দেওয়া পালা।


এক হিসেবে গ্যাসটির ভিতর আরেকটি গ্যাস লুকিয়ে ছিল। তাই নামকরণের সময় সে কথা মনে রেখে নতুন নিষ্ক্রিয় গ্যাসের নাম দেওয়া হল

ক্রিপ্টন।

গ্রিক শব্দ ক্রিপ্টস অর্থ লুকানো। বর্ণহীন স্বাদহীন, গন্ধ হীন ও রাসায়নিক ভাবে নিষ্ক্রিয় এ গ্যাসের নাম পারমানবিক সংখ্যা ৩৬, অবস্থান ১৮ নাম্বার গ্রুপের ৪ নাম্বার পর্যায়ে। এর প্রতীক Kr

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


আর্গন, ক্রিপ্টন ছাড়াও র‍্যামসে নিওন ও জেনন গ্যাস আবিষ্কার করেন। নিষ্ক্রিয় গ্যাসের এই গ্রুপ আবিষ্কারের জন্য ১৯০৪ নোবেল পুরস্কার পান র‍্যামসে।


Saturday, April 06, 2019

গনিতের সমস্যা -০১



আজকে আপনাদের সামনে এনেছি তিনটি গণিতের সমস্যা। এগুলোর উত্তর নিচের কমেন্ট বক্সে দিতে পারেন বা কন্টাক্ট ফর্মের দ্বারা আমাদের কাছে পাঠাতে পারেন।
উত্তর ঠিক হলে আপনার নাম সহ উত্তর প্রকাশ করা হবে আগামী পোস্টে।


প্রশ্নগুলো নিচে দেওয়া হল-

প্রথম প্রশ্ন:-


ফ্লোরা তার ছোট ভাই আকাশের সাথে লুডু খেলতে বসেছে। তাদের একটি করে ঘুটি বাজি আছে। আর ঘুটি গুলো স্টপে( যেখান হতে লুডু খেলা শুরু হয়) বসে আছে।আগে ফ্লোরা চাল দেবে।এরপর আকাশ।প্রশ্ন হচ্ছে দুইজনই একবার করে চাল দেওয়ার পর আকাশের ঘুটি ফ্লোরার ঘরে থাকার জন্য কয়টা ভিন্ন ধরণের চাল হতে পারে?




২য় প্রশ্ন:-

১/৩-১/১২-১/২০-১/৩০-১/৪২-...১/২১০=?

৩য় প্রশ্ন





তিনটি ক্রমিক জোড় সংখ্যার প্রথম ও তৃতীয়টির গুণফল ২৫২ হলে ক্রমিক জোড় সংখ্যা দুটি কত??




উত্তর পারলে কমেন্টের মাধ্যমে জানাতে ভুলবেন না কিন্তু!....

ধন্যবাদ

Thursday, April 04, 2019

জাভা স্ক্রিপ্ট পার্ট -২৮ | জাভা স্ক্রিপ্টের ১০ টি ফাংশন | জাভাস্ক্রিপ্ট বাংলা টিউটোরিয়াল








1. charAt(index):




এই মেথড স্ট্রিং থেকে একটা ক্যারেক্টার/অক্ষর বের করে অনতে ব্যবহৃত হয়। এটা স্ট্রিং ম্যানিপুলেশনের একটি মেথড। index এর জায়গায় যে পূর্নসংখ্যা দিবেন স্ট্রিং থেকে সেই ইনডেক্সধারী অক্ষর/ক্যারেক্টার টি রিটার্ন করবে। যেমন



1.var x = 'Hello codensci';
2.document.write(x.charAt(8));


** প্রথম ক্যারেক্টারের ইনডেক্স নাম্বার ০ এভাবে হিসেব করে। তাহলে var x এ ০-১৫ ইনডেক্স পর্যন্ত ক্যারেক্টার আছে। এর বাইরে যদি কোন ইনডেক্স নাম্বার দিতাম উপরের charAt() মেথডে তাহলে এই মেথড একটি ফাকা স্ট্রিং রিটার্ন করবে।


2. substr(start, length):


স্ট্রিং থেকে একটা অংশ/সাবস্ট্রিং বের করার জন্য। start হল স্ট্রিংয়ের কত নম্বর পজিশন থেকে খোজা শুরু করবে আর length হচ্ছে কয়টি ক্যারেক্টার/অক্ষর নিবে। কাজশেষে এই মেথড একটা সাবস্ট্রিং/শব্দ রিটার্ন করে।



1.var x = 'Hello codensci';
2.document.write(x.substr(3,5));


আউটপুট

lo ci



** যদি start এ মাইনাস মান দেন তাহলে স্ট্রিংয়ের পিছন দিক থেকে খোজা শুরু করবে। -1 হচ্ছে শেষ অক্ষরটি, -2 হচ্ছে শেষ থেকে ২য় অক্ষরটি এভাবে..



** যদি start এর জায়গায় কোন সংখ্যা না দেন তাহলে অর্থ্যাৎ substr('',5) এভাবে দেন তাহলে প্রথম থেকে (বা থেকে) খোজা শুরু করবে।



** যদি length না দেন তাহলে যেমন substr(5) এভাবে দেন তখন ৫ নম্বর পজিশন থেকে শুরু করে পুরো স্ট্রিংয়ের বাকি সব নিয়ে নিবে।




3. substring(start, end):



স্ট্রিং থেকে একটা অংশ/সাবস্ট্রিং বের করার জন্য। start প্যারামিটারে যে সংখ্যা দিবেন স্ট্রিংয়ের সেই পজিশন থেকে ক্যারেক্টার নেয়া শুরু করবে এবং end (যে সংখ্যাটি দিবেন ঐ সংখ্যা স্ট্রিংয়ে যে পজিশনে থাকবে) এর আগ পর্যন্ত ক্যারেক্টার নিয়ে সাবস্ট্রিংটি রিটার্ন করবে। লেখাটি একটু জটিল মনে হচ্ছে? উদাহরনটি দেখুন, আসলে সহজ



1.var x = 'Hello codensci';
2.document.write(x.substring(6, 15));


আউটপুট


coden



** ৬ নম্বর পজিশন থেকে নেয়া শুরু করেছে (৬ নম্বরে আছে W) এবং ১৫ নম্বর (১৫ নম্বর হচ্ছে d) এর আগ পর্যন্ত নিয়ে সাবস্ট্রিংটি (Jitub) রিটার্ন করেছে।


4. toString():


স্ট্রিং বানাতে ব্যবহৃত হয়। এই মেথড অ্যারে, নাম্বার, boolean, date, ফাংশন, এরর ইত্যাদি সব অবজেক্টের সাথে ব্যবহার করা যায়। আমরা এখানে শুধু অ্যারে এবং নাম্বার দেখাচ্ছি।

আ্যারের ক্ষেত্রে এই মেথডের কাজ হচ্ছে অ্যারেকে স্ট্রিং বানানো। যেমন



1.var arT = ['HTML', 'CSS', '22', 'JS'];
2.var reS = arT.toString();
3.document.write(reS);


আউটপুট

HTML,CSS,22,JS



** স্ট্রিং বানিয়ে কমা দিয়ে আলাদা করে তারপর সেটা রিটার্ন করে।



নাম্বারের ক্ষেত্রে যেকোন নাম্বারকে স্ট্রিং বানানো এই মেথডের কাজ যেমন





1.var n = 22;
2.document.write(typeof(n));
3.document.write('<br/>');
4.var reS = n.toString();
5.document.write(typeof(reS));


আউটপুট

number
string



** এখানে toString() এ radix নামে একটা প্যারামিটার অর্থ্যাৎ কোন সংখ্যাভিত্তিক হবে সেটা ঠিক করে দেয়া যায়। যেমন toString(2) দিলে বাইনারি করে দেখাবে (তবে সংখাটি কিন্তু স্ট্রিং)। radix না দিলে সাধারন ১০ ভিত্তিক সংখ্যা দেখাবে। একটা নাম্বারকে স্ট্রিং বানানোর পর সেটা আবার ২, ১০ ইত্যাদি সংখ্যাভিত্তিক হয় কিভাবে? উত্তর হচ্ছে "স্ট্রিংয়ের সংখ্যাত্নক রুপ" বা "string representation of number" যাইহোক বাইনারি করে দেখতে চাইলে



1.var n = 22;
2.document.write(typeof(n));
3.document.write('<br/>');
4.var reS = n.toString(2);
5.document.write(reS);


আউটপুট

number
10110


5. parseInt(string, radix):


স্ট্রিং থেকে পূর্নসংখ্যা বানাতে ব্যবহৃত হয়। string এর জায়গায় যেকোন স্ট্রিং আর radix হচ্ছে নাম্বারটিকে কোন সংখ্যাভিত্তিক পদ্ধতিতে প্রসেস (parse) করা হবে। এখানে 2-36 এর মধ্যে কোন সমর্থিত সংখ্যাভিত্তিক পদ্ধতির কোন সংখ্যা। যেমন 2 দিতে পারেন তখন বাইনারি, 8 দিলে অকটাল, 10 দিলে ডেসিমাল ইত্যাদি। radix যদি না দেন বা 0 দেন তাহলে 10 ভিত্তিক (based) সংখ্যাগত পদ্ধতিতে (numeral system) নাম্বারটি প্রসেস করবে। তবে যদি 0x বা 0X থাকে তবে ১৬ হবে এর base তথা radix এর মান।



==> স্ট্রিং এর শুরুতে যে সংখ্যা থাকবে সেটাই রিটার্ন করবে।

==> যদি দশমিক নাম্বার দেন যেমন 22.36 তাহলে পূর্নসংখ্যা বানিয়ে রিটার্ন করবে।

==> স্ট্রিংয়ের শুরুতে যদি কোন পূর্নসংখ্যা না থাকে তাহলে NaN(Not a Number) রিটার্ন করবে।

==> যদি স্ট্রিং 0 দিয়ে শুরু হয় তাহলে ৮ হবে এর base তথা radix এর মান ধরবে ৮।



কিছু উদাহরন





01.document.write(parseInt('52 Hello Jitubd'));
02.document.write('<br/>');
03.document.write(parseInt('52.230'));
04.document.write('<br/>');
05.document.write(parseInt('Hello'));
06.document.write('<br/>');
07.document.write(parseInt('52'));
08.document.write('<br/>');
09.document.write(parseInt('-52'));
10.document.write('<br/>');
11.document.write(parseInt('0Hello'));
12.document.write('<br/>');
13.document.write(parseInt('0xHello'));
14.document.write('<br/>');
15.document.write(parseInt('0x10'));
16.document.write('<br/>');
17.document.write(parseInt('10110001110',2));
18.document.write('<br/>');
19.document.write(parseInt('22',8));
20.document.write('<br/>');
21.document.write(parseInt('22',16));


আউটপুট

52
52
NaN
52
-52
0
NaN
16
1422
18
34



** এই মেথডটি প্রফেশনালি বেশি ব্যবহার হয় শুধু নাম্বার বানানোর জন্য এবং radix প্যারামিটার বেশি ব্যবহার করা হয়না। আরও সহজভাবে বলি ধরুন একটা ফর্মের ডেটা নিয়ে কিছু যোগ, বিয়োগ ইত্যাদি অপারেশন করবেন, এখন একটা ফিল্ড আছে যেখান থেকে আপনি শুধু নাম্বার আসবে (অর্থ্যাৎ ইউজার নাম্বার ইনপুট দিবে) এটাই আশা করছেন। তখন parseInt() দিয়ে ইউজার ইনপুটকে ফিল্টার করে শুধু নাম্বার নিব্নে। ই্উজার যদিও ভুলে "12taka" দেয় তবুও আপনি ক্যালকুলেশনের সময় 12 পাবেন। তাহলে আর যোগ বিয়োগ ইত্যাদি অপারেশনে সমস্যা হয়না।


6. parseFloat(string):


স্ট্রিং থেকে নাম্বার করার জন্য। এখানে string এর জায়গায় যে স্ট্রিং দিবেন সেটার প্রথমে যদি কোন নাম্বার থাকে তাহলে সেটাকে নাম্বার করে রিটার্ন করবে। এখানে কোন radix প্যারামিটারে নেই। বাকি সব কাজ parseInt() এর মতই শুধু পার্থক্য হচ্ছে floating point number (দশমিক নাম্বার) দিলে parseFloat() সেটাকে সেভাবেই রিটার্ন করবে যেখানে parseInt() শুধু পূর্নসংখ্যার অংশটুকু রিটার্ন করবে। যেমন



1.document.write(parseFloat('52'));
2.document.write('<br/>');
3.document.write(parseFloat('52Hello'));
4.document.write('<br/>');
5.document.write(parseFloat('52.36'));
6.document.write('<br/>');
7.document.write(parseFloat('52.00'));




আউটপুট

52
52
52.36
52




7. floor():

এই মেথড দিয়ে দশমিক সংখ্যাকে কাছাকাছি কোন পূর্নসংখ্যাতে নিয়ে যেতে ব্যবহৃত হয় (নিচের দিকে যাবে)। যেমন ১.৮০ কে ১.০ বানিয়ে দিবে। এটা Math অবজেক্টের একটা মেথড তাই একসেস নিতে Math এরপর ডট (.) দিয়ে ব্যবহার করতে হবে। যেমন



1.document.write(Math.floor(1.80));
2.document.write('<br/>');
3.document.write(Math.floor(1.20));
4.
5.document.write('<br/>');
6.document.write(Math.floor(-1.80));


আউটপুট

1
1
-2




8. ceil() :


এটাও floor() এর মত শুধু পার্থক্য হচ্ছে ceil() উপরের দিকে যাবে। যেমন ১.৮০ কে সে ২ বানাবে যেখানে floor() মেথড ১ বানাবে।



1.document.write(Math.ceil(1.80));
2.document.write('<br/>');
3.document.write(Math.ceil(1.20));
4.document.write('<br/>');
5.document.write(Math.ceil(-1.80));


আউটপুট

2
2
-1





9. encodeURI():

uri এ বিভিন্ন ক্যারেক্টার এসকেপ করতে ব্যবহৃত হয়। এখানে uri একটাই প্যারামিটার দেয়া যায়। যেমন



1.var uri = 'https://www.codensci.com';
2.var eu = encodeURI(uri);
3.document.write(eu);


আউটপুট

https://www.codensci.com



** এনকোড শেষ হলে পরিবর্তিত URI টি রিটার্ন করে।



** কিছু কিছু ক্যারেক্টার এই মেথড এসকেপ করেনা। যেমন ; , / ? : @ & = + $ - _ . ! ~ * ' ( ) #



** এগুলি এসকেপের দরকার হলে encodeURIComponent() আরেকটি মেথড আছে সেটা ব্যবহার করতে পারেন। এটা দিয়ে URI এর প্রতিটি কমপোনেন্ট (যেমন কোয়েরি স্ট্রিংগুলি) অালাদাভাবে এনকোড করা যায়।




10. decodeURI()



encodeURI() দিয়ে এনকোড করা URI যদি পূর্বাবস্থা আনতে হয় তাহলে সেটা decodeURI() মেথড দিয়ে করতে পারেন যেমন



1.var uri = 'codensci.com';
2.var du = decodeURI(uri);
3.document.write(du);


আউটপুট

codensci.com



** যেটা encodeURI() দিয়ে এনকোড হয় সেটাই শুধু decode হবে। যেগুলি ক্যারেক্টার encode হবেনা encodeURI() দিয়ে সেগুলি decode ও হবেনা।


Saturday, March 30, 2019

সিএসএস এর পার্ট-১| ভূমিকা| সিএসএস এর বাংলা টিউটোরিয়াল









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

CSS. কোন আলাদা শব্দ না। এর পূর্ণ রূপ হল Cascading Style Sheet। এককথায় ওয়েব পেজের বিভিন্ন উপাদানের গঠন, আকার, আকৃতি, অবস্থান, রং, গতিশীলতা ইত্যাদি নির্ধারণের জন্য CSS ব্যাবহার করা হয়।

১টি web page সুন্দর ও আকর্ষণীয় করার জন্য CSS এর প্রয়োজনীয়তা অনেক ।

 HTML ও CSS কে যদি কোন প্রানীর সাথে তুলনা করা হয় তাহলে প্রাণির কঙ্কাল হচ্ছে HTML ও CSS হচ্ছে তার বাহিরের রুপ।

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




এটা একটা একঘেয়েমি ব্যাপার। CSS এই জটিল সমস্যা দূর করেছে এখন একটা ওয়েব সাইটে এক বা এর অধিক একই ধরনের পেজ থাকে তাহলেও একটি মাত্র CSS স্ক্রিপ্ট ব্যবহার করে ডিজাইন সম্পূর্ণ করা হয়।  আর একটি কথা না বললেই নয় CSS শেখার আগে অবশ্যই HTML সম্বন্ধে ভাল জ্ঞান থাকতে হবে। HTML সম্বন্ধে ভাল জ্ঞান না থাকতে আমাদের আগের পোস্টের এইচটিএমএল টিউটোরিয়াল গুলো শিখে আসতে পারেন।

আপনারা এর পর কি বিষয়ক টিউটোরিয়াল চান? আপনার মতামত জানাতে কমেন্ট করুন বা কন্ট্রাক্ট ফর্মের দ্বারা যোগাযোগ করুন।

Sunday, March 24, 2019

সিএসএস এর পার্ট-০২| সিএসএস এর স্যানট্যাক্স | সিএসএস বাংলা টিউটোরিয়াল








সিএসএস এর স্যানট্যাক্স

সিএসএস এর ভূমিকা নিয়ে আমি আগের পার্টে আলোচনা করেছি। সেখানে আমি সিএসএস এর "অ আ ক খ " দেওয়ার চেষ্টা করেছি।
কিন্তু,
সিএসএস সম্পর্কে হয়ত আমরা এখনো ভালমত বুঝি নাই। মনে করেন আপনি h1 ট্যাগ আপনার সাইটে ব্যবহার করবেন।সেটা আপনি প্রায় ২০ জায়গায় ব্যাবহার করবেন।

সেক্ষেত্রে আপনি চাইলেন h1 ট্যাগের ফন্ট সাইজ হবে 10px ও এর কালার হবে কমলা(orange) । এই ফন্ট সাইজ ও কালার ২০ জায়গায় ব্যবহার করা কেমন কষ্টকর ব্যাপার। যদি এমন হয় যে, আপনি কোড লেখার আগে লিখে নিলেন যে, এই সাইটের যত h1 ট্যাগ থাকবে তার ফন্ট সাইজ হবে ১০ px ও এর কালার হবে কমলা। এর জন্য আপনাকে আর ২০ জায়গায় ফন্ট সাইজ ও কালার এট্রিবিউটস ব্যবহার করতে হল না। মানে আপনার কাজও কমে গেল।

এবার আসল কাজে আসেন-- এই যে কোড লেখার আগে লিখে নিলেন সাইটের সব h1 কোড এর কালার হবে কমলা ও ফন্ট সাইজ হবে ১০px. এইটাই হল সিএসএস।

আশা করি বুঝেছেন। সিএসএস এর গঠন এবার আমরা আলোচনা করি---
CSS এর নিয়ম গঠিত হয়েছে Selector ও Declaration Block দিয়ে।  নিচের চিত্রটি দেখলে বুঝবেন--

Selector অংশে "ট্যাগ সিলেক্টর" হিসেবে HTML ট্যাগ বা ক্লাস সিলেক্টর হিসেবে HTML ট্যাগ এর ক্লাস এর নাম অথবা আইডি সিলেক্টর হিসেবে HTML ট্যাগ এর আইডি এর নাম বসে।
প্রতিটা Declaration এর একটি property এবং একটি value থাকে।
অর্থাৎ আপনারা এর বুঝেন নাই কিছুই--
এই উদাহরণটা দেখুন--

<head>  <style>  h1{    color:orange;    font-size:10px;  }  </style> </head>
এখানে HTML এর h1 ট্যাগ এর রং কমলা এবং ফন্ট আকার 10px দেয়া হয়েছে। সুতরাং HTML web page এর সকল h1 এর রং কমলা এবং ফন্ট আকার 10px হবে।
আশা করি এই পার্ট বুঝেছেন।
কোন সমস্যা হলে প্লিজ কমেন্ট করে জানাবেন। ধন্যবাদ 

সিএসএস এর পার্ট-০৩ | কোড লেখার পদ্ধতি | সিএসএস বাংলা টিউটোরিয়াল















আমরা আগের পোস্টে সিএসএস এর সিলেক্টর সম্পর্কে জেনেছিলাম।সেখান বলা হয়েছিল সিলেক্টর চার ধরণের হতে পারে।এগুলো দ্বারা নির্দিষ্ট ট্যাগ সিলেক্ট করা যায়। তো সিলেক্টর জানার পর আমাদের জানা উচিৎ কিভাবে ট্যাগ লিখতে হয়। যদিও আগের টিউটোরিয়াল এ এসম্পর্কে একটু ধারণা দেওয়া হয়েছিল।
এখন বিস্তারিতভাবে দেওয়া হল।

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

i) ইন্টারনাল স্টাইল শীট
ii) ইন-লাইন স্টাইল শীট
iii) এক্সটার্নাল স্টাইল শীট




ইন্টারনাল স্টাইল শীট:-

ইন্টারনাল স্টাইল শীট পদ্ধতি হচ্ছে HTML কোড এর <head></head> ট্যাগ এর মধ্যে <style></style> বা স্টাইল ট্যাগ ব্যাবহার করা হয়। এবং <style></style> এর মধ্যেই CSS এর জন্য প্রয়োজনীয় Selector এবং Declaration সমূহ রাখা হয়।
এইভাবে এই ট্যাগ দেওয়া হয়ে থাকে।

<head>
<style>
 h1 {
     color: red;
     margin-left: 28px;
 }
 </style>
</head>


এখানে সিএসএস কোড এইচটিএমএল এর head ট্যাগ এর ভিতর লেখা হয়েছে। যা HTML এর সকল h1 ট্যাগ জন্য প্রযোজ্য হবে।

উদাহরণ :-

<!DOCTYPE html>
<html>
<head>

<style>
h1 {
    color: red ;
    margin-left: 28px;
}
</style>
</head>
<body>


 <h1>এই লেখা সিএসএস এর স্টাইল অনুসারে রান হবে।</h1>
 <h2>এটা সিএসএস এর স্টাইল অনুসারে রান হবে না। কারণ আমরা স্টাইল ট্যাগে h2 এর জন্য কিছু লেখি নাই।</h2>

</body>
</html>



ইন-লাইন স্টাইল শীট:--


ইন-লাইন স্টাইল শীট পদ্ধতিতে এইচটিএমএল এর প্রতিটা ট্যাগের এট্রিবিউটস হিসেবে style এট্রিবিউটস যুক্ত করে এর মধ্যে সিএসএস এর জন্য প্রয়োজনীয় Declaration সমূহ যুক্ত করা হয়।
এইটা নিচের পদ্ধতিতে যোগ করতে হয়।


<h1 style="color:red;margin-left:10px;">
আমি বাংলায় গান গাই।
</h1>

অর্থাৎ প্রতিটা HTML ট্যাগ এর জন্য আলাদা আলাদা ভাবে CSS কোড লিখতে হবে। h1 ট্যাগ এর জন্য লেখা CSS এর কোড অন্য h1 ট্যাগ এ কাজ করবে না।
আমার মতে এই ভাবে লেখা অনেক কষ্টসাধ্য ও সময়সাপেক্ষ।
উদাহরণ :--

<!DOCTYPE html>
<html>
<head>

</head>
<body>

 <h1 style="color:red;margin-left:10px;"> এই লেখা স্টাইল অনুসারে রান হবে। </h1>
 <h1> কিন্তু এটা হবে না। .</h1>

</body>
</html>




এক্সটার্নাল স্টাইল শীট:---


এক্সটার্নাল স্টাইল শীট পদ্ধতিতে সিএসএস জন্য প্রয়োজনীয় Selector এবং Declaration সমূহ আলাদা স্ক্রিপ্টে রাখা হয় এবং স্ক্রিপ্টটিকে বা স্টাইল শীটটিকে নিজের ইচ্ছামত নামে সেভ করা যায় তবে এর ডিক্লেয়ারেশন হবে .css. আপনি এটি নোটপ্যাড ++ দ্বারা এটি করতে পারেন।

এরপর <head></head> এর মধ্যে <link rel="stylesheet" type="text/css" href="আপনার স্টাইলশীটের লিংক এখানে দেবেন"> যুক্ত করে এক্সটার্নাল স্টাইল শীট এর সাথে HTML এর লিংক তৈরি করা হয়। যা নিচে দেখানো হল।

<head>
 <link rel="stylesheet" type="text/css" href="abcd.css">
</head>

উদাহরণ :-

<!DOCTYPE html>
<html>
<head>

<link rel="stylesheet" type="text/css" href="./My Device/rupu/rupu.css">
</head>
<body>

<h1> লিংকের দেওয়া স্টাইল অনুসারে এটি দেখাবে </h1>
<p>লিংকের দেওয়া স্টাইল অনুসারে এটি দেখাবে</p>

</body>
</html>





শেষ কথা:-

এই টিউটোরিয়াল এ এই পর্যন্তই। আশা করি এইটুকু বুঝেছেন।

কোন সমস্যা হলে মন্তব্য করতে ভুলবেন না।

ধন্যবাদ।

আমাদের পোস্ট শেয়ার করুন।

সিএসএস এর পার্ট-০৪| সিএসএস এর সিলেক্টর | সিএসএস বাংলা টিউটোরিয়াল



সিএসএস এর পার্ট-০৩|সিএসএস এর সিলেক্টর | সিএসএস বাংলা টিউটোরিয়াল






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

HTML দ্বারা তৈরি ওয়েব পেজের কোন অংশকে নির্দিষ্টভাবে সিলেক্ট করার জন্য সিলেক্টর ব্যবহার করা হয়। CSS এ বেশ কয়েক ধরণের সিলেক্টর ব্যবহার করা হয় ।
এ গুলোর মধ্যে উল্লেখযোগ্য সিলেক্টর হল--
i) ট্যাগ সিলেক্টর
ii) ক্লাস সিলেক্টর
iii) আইডি সিলেক্টর



ট্যাগ সিলেক্টর:--




 ট্যাগ সিলেক্টর হল সেই সকল এইচটিএমএল ট্যাগ যা দ্বারা ওয়েব পেজের কোন অংশকে নির্দিষ্টভাবে চিহ্নিত করে ডিজাইন করার জন্য ব্যবহৃত করা হয়ে থাকে।

যেমন---


<style>

 p{  background:blue;  font-family: Tahoma;  color: red;  }


</style>


উপরে বর্ণিত code এ HTML ট্যাগ body এর design করা হয়েছে। অর্থাৎ, web page টির body background color হবে blue , font হবে Tahoma এবং text color হবে লাল রঙের।

উদাহরণ --





<!DOCTYPE html>
<html>
<head>
 <style>
 p{
 background: blue ;
 font-family: Tahoma;
 color: red;
 }
 </style>
</head>
<body>
<p> এখানে সকল কিছু p ট্যাগের জন্য দেওয়া হয়েছে।
 <h3>Font এর রং red এবং Font family Tahoma.</h3>
</body>
</html>


ক্লাস সিলেক্টর:---



ক্লাস সিলেক্টর দ্বারা ওয়েবপেজের কোন অংশ বা এক বা একাধিক উপাদানকে নির্দিষ্টভাবে সিলেক্ট করার একটি জনপ্রিয় পদ্ধতি।

একই ক্লাস সিলেক্টর দ্বারা একাধিক উপাদানকে সিলেক্ট করা যায়, তাই এটি কোডিং এর পরিমাণ কমাতে প্রচুর সাহায্য করে।

<style>
 .rayhan{color: blue;
     font-size:10px
 }
</style>

ক্লাস সিলেক্টর নির্দেশ করার জন্য HTML ট্যাগের মধ্যে class কি-ওয়ার্ড ব্যবহার করা হয় এর পর = চিহ্ন দিয়ে ডাবল কোটেশন এর ভেতরে ক্লাস এর নাম লেখা হয়। যেমন <p class="rayhan">। এখানে rayhan হল ক্লাসের নাম। স্টাইল সিটে ক্লাসকে চিহ্নিত করতে (.) ডট চিহ্ন ব্যবহার করা হয় যা উপরের Code এ দেখানো হয়েছে। এর দ্বারা আপনি সিএসএস এ যে ডিজাইন দেবেন সেটা রান হবে। যেমন- আমি উপরে rayhan ক্লাসে লিখেছি এর কালার হবে নীল ও এর ফন্ট সাইজ হবে ১০px.

Example:

<!DOCTYPE html>
<html>
<head>

 <style>
 .rayhan{
     color: blue ;
     font-size:10px
 }
 </style>
</head>
<body>
 <p class="rayhan">Font এর রং blue বর্ণের এবং Font আকার 10px.<p>
</body>
</html>


আইডি সিলেক্টর---


এটা ক্লাস সিলেক্টরের মতই। এটির দ্বারা web page এর কোন অংশ বা কোন উপাদানকে নির্দিষ্টভাবে চিহ্নিত করা যায়।। কিন্তু এর দ্বারা একাধিক উপাদানকে ক্লাস সিলেক্টর এর মত একই আইডি সিলেক্টর দ্বারা চিহ্নিত করা যায় না।
নিচের উদাহরণ দেখলেই বুঝবেন।
<head>
<style>
 #rupu{
 color: green;
 font-family:Tahoma;
 text-align:center;
 }
</style>
</head>


আইডি সিলেক্টর নির্দেশ করার জন্য HTML ট্যাগের মধ্যে id কি-ওয়ার্ড ব্যবহার করা হয় এর পর = চিহ্ন দিয়ে ডাবল কোটেশন এর ভেতরে ক্লাস এর নাম লেখা হয়। যেমন <p id="rupu">। এখানে rupu আইডির নাম। স্টাইল শীটে আইডিকে চিহ্নিত করতে (#) চিহ্ন ব্যবহার করা হয় যা উপরের Code এ দেখানো হয়েছে।

 এর ফলে আপনি যে সকল ডিজাইন করলেন সেটা সেই এইচটিএমএল ট্যাগে রান হবে।

উদাহরণ --


<!DOCTYPE html>
<html>
<head>

 <style>
  #rupu{
  color: green;
  font-family:Tahoma;
  text-align:justify;
 }
 </style>
</head>
<body>
 <p id="rupu">Font এর রং সবুজ বর্ণের এবং Font family Tahoma.<p>
</body>
</html>

গ্রুপিং সিলেক্টর:----



একজন ভাল প্রোগ্রামারের অন্যতম বৈশিষ্ট্য হচ্ছে, তিনি যতোটা সম্ভব কোডকে সক্ষিপ্ত করবেন।
গ্রুপিং সিলেক্টর ব্যবহার করে CSS এর কোডকে অনেকাংশে কমানো সম্ভব হয়।
 অনেক সময় বেশ কিছু HTML উপাদানের জন্য একই ধরণের স্ট্যাইল ব্যবহার করার প্রয়োজন হয়। যেমন h1,h2,p ইত্যাদির জন্য একই color, font-family, text-align ইত্যাদি প্রোপার্টি ব্যবহারের প্রয়োজন হলে সবগুলোর জন্য আলাদা আলাদা ভাবে স্ট্যাইল না করে, একই সাথে সিলেক্টর সমূহকে কমা দিয়ে লিখে স্ট্যাইল নির্ধারণ করলে কোড অনেক কম হবে।
<head>
<style>
p,div,h4,h1{
    text-align: center;
    color: red;
}
</style>
</head>

এখানে p,div,h4 ও h1 ট্যাগ এ একই style এর জন্য আমরা এভাবে গ্রুপ করে লিখেছি।

<!DOCTYPE html>
<html>
<head>

<style>
div,p,h1,h2{
    text-align: center;
    color: red;
}
</style>
</head>
<body>

<h1>ABCDEFGH</h1>
<h2>অ আ ক খ গ ঘ </h2>
<p>অ আ ক খ গ ঘ </p>
<p>স্টাইল ছাড়া প্যারাগ্রাফ </p>

</body>
</html>


নেস্টিং সিলেক্টর:--


CSS এ একটি সিলেক্টরের অন্তর্ভূক্ত অপর একটি সিলেক্টরের জন্য স্ট্যাইল নির্ধারণ করার ক্ষেত্রে নেস্টিং সিলেক্টর ব্যবহার করা হয়।
ধরা যাক স্ট্যাইল শীটে p এর জন্য স্ট্যাইল নির্ধারণ করা হল। par নামের id বিশিষ্ট একটা div উপাদানের মধ্যে অপর একটা প্যারাগ্রাফ আছে। par এর জন্যও স্ট্যাইল নির্ধারণ করা হল। এখন যদি par মধ্যে অবস্থিত প্যারাগ্রাফটির জন্য অলাদা স্ট্যাইল তৈরি করার প্রয়োজন হয় তাহলে নেস্টিং সিলেক্টর ব্যবহার করতে হয়। এজন্য সিলেক্টরে লিখতে হবে par p ।

Example:


<!DOCTYPE html>
<html>
<head>
 <style>
 #par{
 background:blue;
 padding:15px;
 }
 #par p{
 color:red;
 }
</style>
</head>
<body>
<div id="par">
 এইটা par style অনুযায়ী হবে।
<p> এইটা par এবং par p দুইটা style অনুযায়ী হবে।</p>
</div>
</body>
</html>

আশা করি বুঝেছেন।



না বুঝলে অবশ্যই কমেন্ট করে জানাবেন।
ধন্যবাদ।

সিএসএস এর পার্ট - ৫ | সিএসএস বক্স মডেল | সিএসএস বাংলা টিউটোরিয়াল



বক্স মডেল


সকল HTML উপাদানকে CSS দ্বারা স্ট্যাইল যুক্ত করার ক্ষেত্রে বক্স হিসেবে বিবেচনা করা হয়। ওয়েব পেজের লে আউট ডিজাইনের ক্ষেত্রে বক্স মডেল খুবই গুরুত্বপূর্ণ। CSS বক্স মডেল প্রকৃত পক্ষে একটা বক্স যা, কোন HTML উপাদানকে আবৃত করে রাখে।
বক্স মডেল তৈরি করার জন্য Declaration এ কয়েকটি প্রপার্টি নির্ধারণ করে দিতে হয়।
এগুলো হচ্ছে,

i) বক্সের প্রস্থ
ii) বর্ডার
iii) পেডিং
iv) মার্জিন


উদাহরণ :-
<!DOCTYPE html>
<html>
<head>
<title>CSS শিখুন</title>
<style>
div {
    background-color: lightgrey;
    width: 300px;
    padding: 25px;
    border: 25px solid navy;
    margin: 25px;
}
</style>
</head>
<body>
<h2>Demonstrating the Box Model</h2>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>

</body>
</html>




আপনি এই কোড আমাদের সাইটে বসানো এইচটিএমএল এডিটর দিয়ে রান করাতে পারেন।
এইচটিএমএল এডিটরে যেতে এখানে ক্লিক করুন

Saturday, March 23, 2019

সিএসএস এর পার্ট -০৬ | সিএসএস এর ব্যাকগ্রাউন্ড কালার | সিএসএস বাংলা টিউটোরিয়াল







Web page এর বিভিন্ন উপাদান যেমন Body, Pragaph, Table ইত্যাদির জন্য ব্যাকগ্রাউন্ড একটি অপরিহার্য উপাদান। এ সকল উপাদান সমূহের ব্যাকগ্রাউন্ড হিসেবে কালার অথবা ইমেজ ব্যবহার করা্ যায়।

<head>
<style>
body {
    background: lightblue;
}
</style>
</head>

এখানে web page এর ব্যাকগ্রাউন্ড হিসেবে lightblue রং ব্যাবহার করা হয়েছে। আপনি চাইলে সেখানে color code ব্যাবহার করতে পারেন। যেমনঃ lightblue এর স্থলে #2EFEF7 (color code) ব্যাবহার করতে পারেন।

উদাহরণ :-
<!DOCTYPE html>
<html>
<head>
<style>
body {
    background: lightblue;
}
</style>
</head>
<body>

<h1>Background color is light blue.</h1>

</body>
</html>




বি:দ্র: আপনি এইচটিএমএল সিএসএস জাভা স্ক্রিপ্ট আমাদের সাইটে বসানো ইডিটর দিয়ে রান করাতে পারেন। এর জন্য আপনি হোমের ড্রপডাউন মেনু হতে Real Time HTML,CSS,JS Editor


সিএসএস এর পার্ট -০৭ | সিএসএস বর্ডার | সিএসএস বাংলা টিউটোরিয়াল





বর্ডার



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

i) বর্ডার স্টাইল
ii) বর্ডার ওয়াইডথ
iii) বর্ডার কালার
iv) পৃথক বর্ডার


বর্ডার স্টাইল



বর্ডার স্ট্যাইল নির্দেশ করে বর্ডারটি দেখতে কেমন হবে। বর্ডার স্ট্যাইল তৈরির জন্য Declaration করতে হবে, border-style:solid এর অনুরূপ। CSS ব্যবহার করে বিভিন্ন ধরণের বর্ডার স্ট্যাইল তৈরি করা যায়।


<head>
<style>
p.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
p.double {border-style: double;}
p.groove {border-style: groove;}
p.ridge {border-style: ridge;}
p.inset {border-style: inset;}
p.outset {border-style: outset;}
p.none {border-style: none;}
p.hidden {border-style: hidden;}
p.mix {border-style: dotted dashed solid double;}
</style>
</head>


ডটেড স্ট্যাইল বর্ডার তৈরির জন্য Declaration করতে হবে border-style:dotted ;
ড্যাসেড স্ট্যাইল বর্ডার তৈরির জন্য Declaration করতে হবে, border-style:dashed;
ডাবল স্ট্যাইল বর্ডার তৈরির জন্য Declaration করতে হবে, border-style:double;
গ্রোভ স্ট্যাইল বর্ডার তৈরির জন্য Declaration করতে হবে, border-style:groove;
রিডজ স্ট্যাইল বর্ডার তৈরির জন্য Declaration করতে হবে, border-style:ridge;
ইনসেট স্ট্যাইল বর্ডার তৈরির জন্য Declaration করতে হবে, border-style:inset;
আউটসেট স্ট্যাইল বর্ডার তৈরির জন্য Declaration করতে হবে, border-style:outset;

উদাহরণ :--

<!DOCTYPE html>
<html>
<head>
<title>CSS শিখুন</title>
 <style>
 p.dotted {border-style: dotted;}
 p.dashed {border-style: dashed;}
 p.solid {border-style: solid;}
 p.double {border-style: double;}
 p.groove {border-style: groove;}
 p.ridge {border-style: ridge;}
 p.inset {border-style: inset;}
 p.outset {border-style: outset;}
 p.none {border-style: none;}
 p.hidden {border-style: hidden;}
 p.mix {border-style: dotted dashed solid double;}
 </style>
</head>
<body>

 <p class="dotted">A dotted border.</p>
 <p class="dashed">A dashed border.</p>
 <p class="solid">A solid border.</p>
 <p class="double">A double border.</p>
 <p class="groove">A groove border.</p>
 <p class="ridge">A ridge border.</p>
 <p class="inset">An inset border.</p>
 <p class="outset">An outset border.</p>
 <p class="none">No border.</p>
 <p class="hidden">A hidden border.</p>
 <p class="mix">A mixed border.</p>

</body>
</html>






বর্ডার ওয়াইডথ



বর্ডার ওয়াইডথ নির্দেশ করে বর্ডারটি কতটা মোটা হবে। বর্ডার ওয়াইডথ নির্ধারণের জন্য Declaration করতে হবে, border-width:5px; এর অনুরূপ। CSS ব্যবহার করে বিভিন্ন ধরণের বর্ডার ওয়াইডথ নির্ধারণ করা যায়।


<head>
<style>
p.one {
    border-style: solid;
    border-width: thin;
}

p.two {
    border-style: solid;
    border-width: medium;
}

p.three {
    border-style: dotted;
    border-width: 2px;
}

p.four {
    border-style: dotted;
    border-width: thick;
}

p.five {
    border-style: solid;
    border-width: 2px 10px 4px 20px;
}
</style>
</head>



বর্ডার কালার



বর্ডার কালার নির্দেশ করে বর্ডারটির রং কেমন হবে। বর্ডার কালার নির্ধারণের জন্য Declaration করতে হবে, border-color:red; এর অনুরূপ। CSS ব্যবহার করে বিভিন্ন ধরণের বর্ডার কালার নির্ধারণ করা যায়।


<head>
<style>
p.one {
    border-style: solid;
    border-color: yellow;
}


p.two {
    border-style: solid;
    border-color: red green blue yellow;
}
</style>
</head>


হলুদ রঙের বর্ডার তৈরির জন্য Declaration করতে হবে, border-color:yellow;
rgb পদ্ধতিতেও বর্ডার কালার রির্ধারণ করা যায়, এ পদ্ধতিতে বর্ডার তৈরির জন্য Declaration করতে হবে border-color:rgb(0,255,0);
hex পদ্ধতিতেও বর্ডার কালার রির্ধারণ করা যায়, এ পদ্ধতিতে বর্ডার তৈরির জন্য Declaration করতে হবে, border-color:#0000FF;
বর্ডার কালার ট্রান্সপারেন্ট হতে পারে, ট্রান্সপারেন্ট বর্ডার তৈরির জন্য Declaration করতে হবে,border-color:transparent; ।

কোন HTML উপাদানের চারপাশের বর্ডার চার ধরণের রঙের হতে পারে, এধরণের বর্ডার তৈরির জন্য Declaration করতে হবে, border-color:red blue green yellow; এখানে ১ম red নির্দেশ করে top border color ; ২য় blue নির্দেশ করে right border color; ৩য় green নির্দেশ করে down border color; ৪র্থ yellow নির্দেশ করে left border color ;


পৃথক বর্ডার


কোন HTML উপাদানের চারপাশের বর্ডার এর স্টাইল, ওয়াইডথ এবং কালার এ সবই ভিন্ন হতে পারে।


<head>
<style>
p {
    border-top: dotted 8px RED;
    border-right: dashed 6px BLUE;
    border-bottom: double 6px GREEN;
    border-left: solid 5px YELLOW;
}
</style>
</head>



এ এধরণের বর্ডার তৈরির ক্ষেত্রে উপরের দিকের বর্ডারের জন্য Declaration করতে হবে,border-top: dotted 8px RED;
ডান দিকের বর্ডারের জন্য Declaration করতে হবে, border-right: dashed 6px BLUE;
নিচের দিকের বর্ডারের জন্য Declaration করতে হবে, border-bottom: double 6px GREEN;
বাম দিকের বর্ডারের জন্য Declaration করতে হবে,border-left: solid 5px YELLOW;

উদাহরণ :-

<!DOCTYPE html>
<html>
<head>
<style>
p {
    border-top: dotted 8px RED;
    border-right: dashed 6px BLUE;
    border-bottom: double 6px GREEN;
    border-left: solid 5px YELLOW;
}
</style>
</head>
<body>

<p>4 different border styles.</p>

</body>
</html>




আপনি এই কোড আমাদের সাইটে বসানো এইচটিএমএল এডিটর দিয়ে রান করাতে পারেন।
এইচটিএমএল এডিটরে যেতে এখানে ক্লিক করুন









সিএসএস এর পার্ট - ০৮| সিএসএস এর মার্জিন | সিএসএস বাংলা টিউটোরিয়াল









মার্জিন



বিভিন্ন HTML উপাদানের চারপাশে কতটুকু স্থান ফাঁকা থাকবে তা নির্দেশ করার জন্য মার্জিন ব্যবহার করা হয়। এজন্য CSS এ margin Property ব্যবহার করা হয়।
সাধারণভাবে কোন HTML উপাদানের চারপাশে সমান পরিমান মার্জিন তৈরি করার জন্য Declaration করতে হয় margin:15px;এর অনুরূপ।এখানে px এর পরিবর্তে cm, pt, auto, % ব্যবহার করা যায়।


<head>
<style>
p {
    background-color: yellow;
}

p.ex {
    border:1px solid red;
    margin-top: 100px;
    margin-bottom: 100px;
    margin-right: 150px;
    margin-left: 80px;
}
</style>
</head>


যদি উপরের দিকে মার্জিন দিতে হয় তাহলে Declaration করতে হবে margin-top:20px;
নিচের দিকে মার্জিন দেয়ার জন্য Declaration করতে হবে margin-bottom:25px;
বাম দিকে মার্জিন দেয়ার জন্য Declaration করতে হবে margin-left:30px;
ডান দিকে মার্জিন দেয়ার জন্য Declaration করতে হবে margin-right:35px;

চারদিকের মার্জিন একইসাথে Declaration করা যায় যেমন margin:20px 25px 30px 35px; এখানে 20px উপরের দিকের মার্জিন নির্দেশ করে, 25px ডান দিকের মার্জিন নির্দেশ করে, 30px নিচের দিকের মার্জিন নির্দেশ করে, 35px বাম দিকের মার্জিন নির্দেশ করে।


উদাহরণ :--


<!DOCTYPE html>
<html>
<head>

<style>
p {
    background-color: yellow;
}

p.ex {
    border:1px solid red;
    margin-top: 100px;
    margin-bottom: 100px;
    margin-right: 150px;
    margin-left: 80px;
}
</style>
</head>
<body>

<p class="ex">This paragraph has a top and bottom margin of 100px, a left margin of 80px, and a right margin of 150px.</p>

</body>
</html>




আপনি এই কোড আমাদের সাইটে বসানো এইচটিএমএল এডিটর দিয়ে রান করাতে পারেন।
এইচটিএমএল এডিটরে যেতে এখানে ক্লিক করুন


সিএসএস এর পার্ট -৯ | সিএসএস এর প্যাডিং | সিএসএস বাংলা টিউটোরিয়াল







প্যাডিং



বিভিন্ন HTML উপাদানের যদি বর্ডার থাকে, তাহলে বর্ডার থেকে কনটেন্ট এর চারপাশে কতটুকু স্থান ফাঁকা থাকবে তা নির্দেশ করার জন্য প্যাডিং ব্যবহার করা হয।
প্যাডিং মূলত বিভিন্ন HTML উপাদানের ব্যকগ্রাউন্ড এরিয়া বৃদ্ধি করে থাকে । প্যাডিং ব্যবহার করার জন্য CSS এ padding Property ব্যবহার করা হয়। সাধারণভাবে কোন HTML উপাদানের চারপাশে সমান পরিমান প্যাডিং তৈরি করার জন্য Declaration করতে হয় padding:15px;এর অনুরূপ।এখানে px এর পরিবর্তে cm, pt, auto, % ব্যবহার করা যায়।



<head>
<style>
.pad {
    border: 1px solid red;
    background-color: yellow;
    padding-top: 50px;
    padding-right: 30px;
    padding-bottom: 50px;
    padding-left: 80px;
}
</style>
</head>


যদি উপরের দিকে প্যাডিং দিতে হয় তাহলে Declaration করতে হবে padding-top:50px;
নিচের দিকে প্যাডিং দেয়ার জন্য Declaration করতে হবে padding-bottom:50px;
বাম দিকে প্যাডিং দেয়ার জন্য Declaration করতে হবে padding-left:80px;
ডান দিকে প্যাডিং দেয়ার জন্য Declaration করতে হবে padding-right:30px;।

চারদিকের প্যাডিং একইসাথে Declaration করা যায় যেমন padding:50px 30px 50px 80px; এখানে 50px উপরের দিকের প্যাডিং নির্দেশ করে, 30px ডান দিকের প্যাডিং নির্দেশ করে, 50px নিচের দিকের প্যাডিং নির্দেশ করে, 80px বাম দিকের মার্জিন নির্দেশ করে।

উদাহরণ :--


<!DOCTYPE html>
<html>
<head>

<style>
.pad {
    border: 1px solid red;
    background-color: yellow;
    padding-top: 50px;
    padding-right: 30px;
    padding-bottom: 50px;
    padding-left: 80px;
}
</style>
</head>
<body>

<p class="pad">This paragraph has a top and bottom padding of 50px, a left padding of 80px, and a right padding of 30px.</p>

</body>
</html>



আপনি এই কোড আমাদের সাইটে বসানো এইচটিএমএল এডিটর দিয়ে রান করাতে পারেন।
এইচটিএমএল এডিটরে যেতে এখানে ক্লিক করুন



Like us on Facebook