সবাই ভাল আছেন নিশ্চয়ই।। আগামি পর্বে লে আউট সম্পর্কে পোস্ট করা হবে।। আর লে আউট বুঝতে হলে কালারের দিকে যেতে হবে না হলে ভাল ভাবে বোঝা যাবে না।। তাই আজ কালার নিয়ে আলোচনা করা হবে।। যদিও এটি সিএসএস এর বিষয় তবুও হালকা পাতলা ধারনা থাকা দরকার এইচটিএমএল সেখার সময়।।
তাহলে চলুন কালার নিয়ে সামান্য কিছু ধারনা অর্জন করি।।
ওয়েব পেজে রং এর ব্যবহার খুবই গুরুত্বপূর্।। একটা ওয়েব পেজ গঠিত হয় এক বা একাধিক প্যারাগ্রাফ, শিরোনাম, টেবিল, ব্যাগ্রাউন্ড, বর্ডার ইত্যাদির সমন্বয়ে। এ সকল উপাদানের প্রত্যেকটিতেই কোন না কোন রং ব্যবহার করতে হয়। কোন একটি পেজের ব্যাগ্রাউন্ড কালার নির্দিষ্ট করার জন্য body ট্যাগের মধ্যে body লেখার পর একটা স্পেস দিয়ে bgcolor=" " লেখতে হবে এর পর " " এর মধ্যে BLACK, SILVER, GRAY, WHITE, MAROON, RED, PURPLE, FUSCHSIA, GREEN, LIME, OLIVE, YELLOW, NAVY, BLUE, TEAL এবং AQUA এই ষোলটি রং এর যে কোন একটি লেখা হলে পেজের ব্যাগ্রাউন্ডে সেই দেখা যাবে। যেহেতু case sensitive নয় তাই ছোট হাতের অক্ষরে লেখলেও কোন সমস্যা নেই, যেমন লেখা হয়েছে,
<body bgcolor="green">
এছাড়া hexadecimal code ব্যবহার করেও ব্যাগ্রাউন্ড কালার নির্বাচন করা যায়। যেমন উপরের কোডটি নিচের মত লেখা যায়
<body bgcolor="#00FF00">
color piker থেকে সহজেই বিভিন্ন কালারের জন্য hexadecimal code সংগ্রহ করা যায়। এছাড়া নিচের চার্ট থেকেও কাজটি করা যাব।। hexadecimal code এর শুরুতে একটা # চিহ্ন দিয়ে শুরু করতে হয।।
ব্যাগ্রাউন্ড কালার দেওয়ার আরও একটা মজার পদ্ধতি আছে। লাল, সবুজ আর নীল এই তিনটি রং হচ্ছে মৌলিক রং, আর অন্য সব রং এই তিনটি রং এর সংমিশ্রনে তৈরি। যদি coding করে এই তিনটি রংকে মিশিয়ে নতুন রং তৈরি করা হয়, তাহলে মন্দ হয় ন।। এ কাজটি সুসম্পন্ন করতে সবুজ ব্যাগ্রাউন্ডের জন্য নিচের মত করে লেখা যেতে পারে
<body bgcolor="rgb(0,255,0)">
এখানে rgb অর্থ হল red green blue আর (0,255,0) এর অর্থ হল রংটিতে যথাক্রমে লাল, সবুজ, নীল রং এর পরিমান যথাক্রমে 0%, 100%, 0% কারন এখানে বিশুদ্ধ সবুজ রং নেয়া হয়েছে। আর যে কোন রং এর মান 0-255 পর্যন্ত হতে পারে।। যেহেতু g বা green এর মান 255 তাই তা 100%। তিনটি রং এর মান 0-255 এর মধ্যে পরিবর্তন করে ইচ্ছা অনুযায়ী নতুন নতুন রং তৈরি করা যাবে ।।
আসুন একটি উধাহরন দেখি,
<html> <head> <title> Learning Color code</title> </head> <body bgcolor="orange"> <h2 style=" color:#339900" > This is the body of your web site. </h2> <p style="color:#990033"> This is a paragraph.<br /> This is a paragraph. <br /> This is a paragraph.<br /> This is a paragraph.<br /> </p> </body>
একটা নোটপ্যাড open করে উপরের code টুকু লিখে file মেনু থেকে Save as এ ক্লিক করে File name: index.html , Save as type : All files, দিয়ে save করে index.html ফাইলটি Mozilla Firefox দিয়ে open করলে নিচে প্রদর্শিত ছবির মত দেখাবে।।
এবার দেখি কোড গুল কিভাবে কাজ করছে,
নিশ্চয়ই বুঝতে অসুবিধা হচ্ছে না।। আগামীতে সিএসএস সেখার সময় এই ব্যাপারে আরও বিস্তারিত আলোচনা করা হবে।।
আর এর মধ্যে কোন সমস্যা থাকলে তা জানাবেন।। আজ এই পর্যন্তই।। আল্লাহ্ হাফেজ।।
ফেসবুক এ আমাকে পেতে নিচে ক্লিক করুন---
আমি kazi Kowshik। বিশ্বের সর্ববৃহৎ বিজ্ঞান ও প্রযুক্তির সৌশল নেটওয়ার্ক - টেকটিউনস এ আমি 11 বছর 10 মাস যাবৎ যুক্ত আছি। টেকটিউনস আমি এ পর্যন্ত 22 টি টিউন ও 281 টি টিউমেন্ট করেছি। টেকটিউনসে আমার 1 ফলোয়ার আছে এবং আমি টেকটিউনসে 0 টিউনারকে ফলো করি।
আরও বিস্তারিত লিখলে ভাল হত ! যাই হোক এগিয়ে চলুন, আমিও আছি আপনার সাথে (পড়তে পড়তে!) ।
ভাইয়া ……আমাকে একটা সাহায্য করবেন। আমি ফেসবুক ফেসপাইল গ্যাজেট এর জাভা স্ক্রিপ্ট খুঁজছি, পাচ্ছি না। দিতে পারলে বাধিত হব ভাইয়া।
![jQuery for Web Design [পর্ব-০৪] :: jQuery এর FadeIn FadeOut মেথড জানবো ও ব্যবহার করে দেখব](https://dnc.techtunes.io/tDrive/tuner/2018/04/techtunes_fee81aa370998cccf57ea2d7dc08eaa8-368x207.jpg "jQuery for Web Design [পর্ব-০৪] :: jQuery এর FadeIn FadeOut মেথড জানবো ও ব্যবহার করে দেখব")
![HTML, CSS, JS ও PHP ট্রেনিং সেন্টার [পর্ব-০৫] :: ওয়েব সাইট এ টেবিল তৈরি](https://dnc.techtunes.io/tDrive/tuner/mmkowshik2/148266/chaintune_html-css-js-and-php-tranning-center-Copy.jpg "HTML, CSS, JS ও PHP ট্রেনিং সেন্টার [পর্ব-০৫] :: ওয়েব সাইট এ টেবিল তৈরি")
ভাল লাগছে মানে অনেক ভাল লাগছে ভাইজান। আপনের স্কুলের একজন ছাত্র ভাবতে পারেন। পাশেই আছি।
আমি একটা বাংলা ফোরাম করছি। ভুল ত্রুটি কিছু থাকলে ধরায়া দিলে বড় মেহেরবানী হইব।
বড় ভাইজানগো বরাবর দরখাস্ত পেশ করতেছি, আপনেরা বাঙ্গালা ফোরামের দিকে তাকায়া ভুল ত্রুটি দেখায়া ও সংশোধনের রাস্তা বাতায়া দিলে দেশ জাতির উপকার হবে। আমি ধন্য হব।
http://www.kazirhut.com