আর শর্টকার্ট নয় সঠিক নিয়মে সবাই মিলে শিখি ওয়েব ডিজাইন ও ওয়েব প্রোগ্রামিং (HTML-2)

আর শর্টকার্ট নয় সঠিক নিয়মে সবাই মিলে শিখি ওয়েব ডিজাইন ও ওয়েব প্রোগ্রামিং (HTML-1) এর মাধ্যমে আমরা HTML সম্পর্কে প্রাথমিক ধারণা অর্জন করেছি। এখন আমরা HTML ব্যবহার করে কিভাবে একটা ওয়েব পেজের ব্যকগ্রাউন্ড কালার দিতে হয় সেই বিষয়টি দেখব।

আমাদের প্রয়োজনীয় Code এবং এর বিভিন্ন অংশ:

আমরা একটা নোটপ্যাড open করে নিচের code টুকু লিখি।

Code:

<html>

<head>

<title> This is the title of your web site.</title>

</head>

<body bgcolor="green">

This is the body of your web site.

</body>

</html>

এখন file মেনু থেকে Save as এ ক্লিক করে File name: index.html  ,   Save as type : All files,  দিয়ে save করি । save করা index.html ফাইলটি Internet explorer দিয়ে open করলে নিচের মত দেখাবে।

C0de বিশ্লেষণ:

<html> ,<head>,<title>,<body> ট্যাগ গুলির সাথে আমরা এখন পরিচিত। আমরা যদি একটি ওয়েব পেজে HTML ব্যবহার করে ব্যকগ্রাউন্ড কালার দিতে চাই তাহলে আমাদেরকে <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">

আমরা PHOTOSHOP এর 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 এর মধ্যে  পরিবর্তন করে আমরা আমাদের ইচ্ছা অনুযায়ী নতুন নতুন রং তৈরি করতে পারি ।

শেষে দুটি কথা: ছোট একটা ব্যপার লিখতে গিয়ে অনেক বড় করে ফেললাম । অমিও বুঝতে পারিনি যে এত বড় হবে । লেখতে লেখতে অনেক কিছু মাথায় চলে এল তাই শেয়ার করলাম। এক ঘেয়েমি লাগলে ক্ষমা করবেন । কিন্তু যা লেখলাম ভবিষ্যতে coding  করতে  গিয়ে আমাকেও বারবার এই লেখাটিতে ফিরে দেখতে হবে। আর আমাদের শুধুমাত্র ব্যকগ্রাউন্ডের জন্য নয় Text formating এর জন্যও রং এর code নির্বাচন খুবই গুরুত্বপূর্ণ। তো রঙে রঙে রাঙিয়ে তুলুন আপনার ওয়েব পেজ। সবাই ভাল থাকবেন।

20 thoughts on “আর শর্টকার্ট নয় সঠিক নিয়মে সবাই মিলে শিখি ওয়েব ডিজাইন ও ওয়েব প্রোগ্রামিং (HTML-2)”

  1. Pingback: বাংলা টিউটরিয়াল|বাংলা ভাষায় বিশ্বের প্রথম টিউটরিয়াল সাইট | Bangla Tutorials » Blog Archive » ই-মেইল পাঠানোর ছোট্

  2. Pingback: বাংলা টিউটরিয়াল|বাংলা ভাষায় বিশ্বের প্রথম টিউটরিয়াল সাইট | Bangla Tutorials » Blog Archive » আর শর্টকার্ট নয় সঠি

  3. @সজীব এবং সাগর: ধন্যবাদ আপনাদেরকে। আশা করি পরবর্তি পর্বে নিয়মিত থাকবেন। আপনাদের প্রেরণাতেই নতুন নতুন লেখার জন্ম হয়।

  4. Pingback: আর শর্টকার্ট নয় সঠিক নিয়মে সবাই মিলে শিখি ওয়েব ডিজাইন ও ওয়েব প্রোগ্রামিং (HTML-5) | বাংলা টিউটরিয়া

  5. Pingback: HTML এ Font ট্যাগের ব্যবহার (HTML টিউটোরিয়াল – 6)  | বাংলা টিউটরিয়াল|বাংলা ভাষায় বিশ্বের প্রথম টিউটরিয়

  6. Pingback: বাংলা টিউটরিয়াল|বাংলা ভাষায় বিশ্বের প্রথম টিউটরিয়াল সাইট | Bangla Tutorials » Blog Archive » CSS টিউটরিয়াল (প্রাথম

  7. Pingback: বাংলা টিউটরিয়াল|বাংলা ভাষায় বিশ্বের প্রথম টিউটরিয়াল সাইট | Bangla Tutorials » Blog Archive » সিএসএস সিন্টেক্স (ক

  8. Pingback: বাংলা টিউটরিয়াল|বাংলা ভাষায় বিশ্বের প্রথম টিউটরিয়াল সাইট | Bangla Tutorials » Blog Archive » CSS দিয়ে তৈরি করি নিজে

  9. Pingback: CSS দিয়ে তৈরি করি নিজের ওয়েব সাইটের আকর্ষনীয় নেভিগেশন বার « »» মানুষ মানুষের জন্য-জীবন জীবনের জন্

  10. Pingback: HTML টিউটরিয়াল : ফরম ডিজাইন  | বাংলা টিউটরিয়াল|বাংলা ভাষায় বিশ্বের প্রথম টিউটরিয়াল সাইট | Bangla Tutorials

    1. জাকির

      @Hossain,( আপনাকে চেনা মনেহচ্ছে। ) আসলে টিউটরিয়ালবিডির এ টিউটরিয়ালগুচ্ছ পেয়ে আমি আন্দিত।

  11. আমি আমার সাইটে মেনু এড করেছি HTML দিয়ে(একটি ছবি দিলাম)। আমার সাইটে লেখা আকারে তা সো করছে। আমি চাচ্ছি যাতে মেনুর মত করে তা সো করে। যে লেখার চারপাশ সহ সাদা কালার হয়। কিন্তু কিভাবে করব বুঝতে পারছি না। (মেনুগুলো আমার সাইটের পিকচারের উপরে দেখুন।)

  12. নানান ভাবে নতুন জিনিস শিখছি দিবা রাত্রও। ভাই অসাধারন। আরও শিখতে চাই। অনেক মজার কাজ।

  13. Wow, superb blog layout! How long have you been blogging for? you make blogging look easy. The overall look of your website is excellent, let alone the content!. Thanks For Your article about আর শর্টকার্ট নয় সঠিক নিয়মে সবাই মিলে শিখি ওয়েব ডিজাইন ও ওয়েব প্রোগ্রামিং (HTML-2) | টিউটোরিয়ালবিডি .

Leave a Comment