আগের পর্ব গুলোতে আমরা ওয়েব পেজ ডিজাইনের জন্য এইচটিএমএল এর বেসিক কিছু ট্যাগ এলিমেন্ট, এট্রিবিউট ইত্যাদির কাজ শিখেছি যা দ্বারা আমরা নূন্যতম একটি পেজ ডিজাইন করতে পারব। কিন্তু তার মানে এই নয় যে ভাল মানের কোন পেজ ডিজাইন শিখে ফেলেছি। তবে যা কিছু শিখেছি সে গুলো কিন্তু অনেক গুরুত্বপূর্ণ ওয়েব পেজ ডিজাইনের জন্য, যা প্রফেশনাল ওয়েব পেজ ডিজাইনের জন্য প্রতিনিয়ত কাজে লাগবে। কিন্তু আমরা এখন পর্যন্ত একটি ওয়েব পেজের ব্যাকগ্রাউন্ড ডিজাইন করা শিখি নাই।
ব্যাকগ্রাউন্ড ডিজাইন নানান ভাবে করা যায়। ব্যাকগ্রাউন্ডে আমরা কোন স্পেসিফিক কালার ব্যবহার করতে পারি, কোন ইমেজ বা ছবি ব্যবহার করতে পারি, কোন ডিজাইন করা নকশা ব্যবহার করতে পারি, কোন স্লাইড-শো ব্যবহার করতে পারি, এমনকি যে কোন ভিডিও ক্লিপও ব্যাকগ্রাউন্ডে ব্যবহার করতে পারি। নিচে আমরা ব্যাকগ্রাউন্ড ডিজাইনের জন্য কিছু ট্যাগ এলিমেন্ট নিয়ে সংক্ষিপ্ত আলোচনা করব।
একটি পেজ ডিজাইনের ক্ষেত্রে আমরা যদি পেজটির ব্যাকগ্রাউন্ডে কোন স্পেসিফিক কালার ব্যবহার করতে চাই তাহলে BGCOLOR এট্রিবিউট টি ব্যবহার করে করতে পারি। BGCOLOR হল BODY ট্যাগের একটি এট্রিবিউট। এই এট্রিবিউট টি বডি ট্যাগের মধ্যে এট্রিবিউট হিসাবে ব্যবহার করতে হয়। এই ট্যাগের সিনট্যাক্স বা ফরম্যাট হল: <body BGCOLOR=”RED”> … </body>।
আমরা এট্রিবিউট টির ভ্যালু হিসাবে কোন রং এর নাম সরাসরি লিখতে পারি বা রং এর কালার কোড লিখতে পারি। যেই কালারের নাম বা কোড লিখব সেই কালার টি উক্ত পেজের ব্যাকগ্রাউন্ড কালার হিসাবে দেখা যাবে। নিচে ব্যাকগ্রাউন্ডে কালার ব্যবহার করে কোড এবং ব্রাউজারের ফলাফলের স্ক্রিনশট দেওয় হল। আশাকরি কোড এবং ব্রাউজারের ফলাফল মিলিয়ে দেখলে বিষয়টি সহজে বুঝতে পারবেন।
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>BGCOLOR Element</title> </head> <body bgcolor= green> <h1 style="color: #fff">This is "bgcolor attribute" for green color backgroud</h1> </body> </html>
উপরের কোডে আমরা BGCOLOR Attribute ব্যবহার করে পেজের ব্যাকগ্রাউন্ড কালার হিসাবে সবুজ রং ব্যবহার করেছি কিন্তু পেজের মধ্যে h1 ট্যাগ এর ভিতর “This is BGCOLOR Attribute for green color background” লেখাটি কে ইনলাইন সিএসএস কোড লিখে সাদা কালার করেছি। যখন আমরা সিএসএস শিখব তখন এগুলো নিয়ে আলোচনা করব এখন এটা নিয়ে আলোচনা করার দরকার নেই। এবং এর আগের কোন এক পর্বে Font ট্যাগ এর মধ্যে color Attribute ব্যবহার করে লেখার কালার পরিবর্তন করা শিখে ছিলাম।
সিএসএস এবং ফন্ট ট্যাগ এর color attribute ব্যবহার করে আমরা শুধু মাত্র একটি নির্দিষ্ট ট্যাগ এলিমেন্ট বা div এলিমেন্টের ভিতরের কালার পরিবর্তন করতে পারব। কিন্তু আমরা যদি একটি ওয়েব পেজের সমস্ত লেখা বা ফন্টের কালার একবারে পরিবর্তন করতে চাই তাহলে আমাদের কে body ট্যাগ এর মধ্যে text attribute ব্যবহার করতে হবে। নিচে text attribute ব্যবহার করে কোড এবং ব্রাউজারের ফলাফলের স্ক্রিনশট দেওয়া হল। এবার খেয়াল করে দেখুন যে h1 ট্যাগের মধ্যে কোন প্রকার ইনলাইন সিএসএস এবং কালার এট্রিবিউট ব্যবহার করা হয় নি তারপরও লেখার কালার সাদা রং এর হয়েছে এবং ব্যাকগ্রাউন্ড সবুজ রং এর হয়েছে কারণ text= white এবং bgcolor= green ব্যবহার করা হয়েছে। কোড গুলো ভালভাবে খেয়ার করুন তাহলে text attribute সম্পর্কে ভাল ধারনা তৈরি হয়ে যাবে।
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>BGCOLOR Element</title> </head> <body bgcolor= green text= white> <h1>This is "text attribute" for white color text</h1> </body> </html>
আমরা ব্যাকগ্রাউন্ডে কালার ব্যবহার করা শিখেছি এবং আমরা যদি ইচ্ছা করি তাহলে ব্যাকগ্রাউন্ডে কালারের পরিবর্তে কোন ইমেজ বা ছবি ব্যবহার করতে পারি। ব্যাকগ্রাউন্ডে ইমেজ ব্যবহার করার জন্য আমাদের কে background attribute ব্যবহার করতে হবে। background attribute এর ভ্যালু হিসাবে আমাদের কে কোন একটি ইমেজ ফাইল এর নাম এবং লোকেশন দিতে হবে। নাম এবং লোকেশন পাথ সঠিক না হলে ব্যাকগ্রাউন্ডে কোন ইমেজ শো করবে না। তাই ফাইলের নাম এবং ফাইল লোকেশন পাথ যেন সঠিক হয় সে দিকে লক্ষ্য রাখুন। এর ফরম্যাট হল: <body background=”file_name_&_location”> নিচে background attribute ব্যবহার করে কোড এবং ব্রাউজারের আউটপুটের স্ক্রিনশট দেওয়া হল। কোড এবং ব্রাউজারের ফলাফল ভালভাবে মিলিয়ে দেখুন আশাকরি background image ব্যবহার সম্পর্কে ভাল ধারনা তৈরি হযে যাবে। সাধারণত ইমেজ ফাইল ফরম্যাট হিসাবে.jpeg, .jpg, .GIF, .png ইত্যাদি ফাইল ফরম্যাটের ইমেজ ফাইল ব্যবহার করা হয়।
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Background Element</title> </head> <body background="img/54.png" bgcolor= green text= white> <h1>This is "background attribute" for backgroud Image</h1> </body> </html>
আজকে আমরা বিভিন্ন প্রকার কালার, কালার কোড এবং বিভিন্ন স্টাইলের ইমেজ, টেমপ্লেট, গ্রাফিক্স ইত্যাদি দিয়ে একটি ওয়েব পেজের ব্যাকগ্রাউন্ড ডিজাইন করা শিখেছি। একটি ওয়েব পেজ এর ব্যাকগ্রাউন্ড শুধু মাত্র কালার ব্যবহার না করে যদি নজরকাড়া ডিজাইন বা ইমেজ অথবা গ্রাফিক্স ব্যবহার করি তাহলে ওয়েবপেজ টি অনেক আকর্ষণীয় লাগবে। এক্ষেত্রে খেয়াল রাখতে হবে ইমেজ বা গ্রাফিক্স যেন অপটিমাইজ থাকে অযথা যেন বেশী ভারি না থাকে। না হলে ভারি ইমেজ এর জন্য ওয়েব পেজ লোড নিতে অনেক দেরি করবে। এতে ভিজিটর বিরক্ত হবে এবং ওয়েব সাইটের বাউন্স রেট বেড়ে সাইট র্যাংক হারাবে। আজকে এখানেই শেষ করলাম দেখা হবে আগামী পর্বে। আল্লাহ হাফেজ।
আমি মো সাদ্দাম হোসাইন। Student, ইনস্টিটিউশন অফ ইঞ্জিনিয়ার্স, বাংলাদেশ (আইইবি), ঢাকা। বিশ্বের সর্ববৃহৎ বিজ্ঞান ও প্রযুক্তির সৌশল নেটওয়ার্ক - টেকটিউনস এ আমি 2 বছর যাবৎ যুক্ত আছি। টেকটিউনস আমি এ পর্যন্ত 19 টি টিউন ও 5 টি টিউমেন্ট করেছি। টেকটিউনসে আমার 2 ফলোয়ার আছে এবং আমি টেকটিউনসে 1 টিউনারকে ফলো করি।
![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 [পর্ব-০৮] :: ডিভিশন এলিমেন্ট, সেন্টার এলিমেন্ট এবং ব্লককোট এলিমেন্ট এর ব্যবহার](https://dnc.techtunes.io/tDrive/tuner/2022/12/techtunes_defb5b3c20fedb3f64687d9b2ac65272-368x207.png "খুব সহজে ওয়েব ডিজাইন – HTML [পর্ব-০৮] :: ডিভিশন এলিমেন্ট, সেন্টার এলিমেন্ট এবং ব্লককোট এলিমেন্ট এর ব্যবহার")
![খুব সহজে ওয়েব ডিজাইন – HTML [পর্ব-০৪] :: টাইটেল ট্যাগ, হরাইজন্টাল রুল এবং লাইন ব্রেক ট্যাগ এর ব্যবহার](https://dnc.techtunes.io/tDrive/tuner/2022/11/techtunes_db5ebb4a97f4df430dd21bf9e34b22ea-368x207.png "খুব সহজে ওয়েব ডিজাইন – HTML [পর্ব-০৪] :: টাইটেল ট্যাগ, হরাইজন্টাল রুল এবং লাইন ব্রেক ট্যাগ এর ব্যবহার")
![খুব সহজে ওয়েব ডিজাইন – HTML [পর্ব-০৩] :: HTML Structure – হেড সেকশন এলিমেন্ট এবং বডি সেকশন এলিমেন্ট](https://dnc.techtunes.io/tDrive/tuner/2022/11/techtunes_e4e19c93752d23b3e0638d75b2d61c3d-368x207.png "খুব সহজে ওয়েব ডিজাইন – HTML [পর্ব-০৩] :: HTML Structure – হেড সেকশন এলিমেন্ট এবং বডি সেকশন এলিমেন্ট")