Awesome! টিউনস
সকল Awesome! টিউনস

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

2,433 দেখা 11 টিউমেন্টস জোসস
টিউন বিভাগ ওয়েব ডেভেলপমেন্ট
প্রকাশিত
Level 2

147 টিউনস 469 টিউমেন্টস 17 ফলোয়ার

আর শর্টকার্ট নয় সঠিক নিয়মে সবাই মিলে শিখি ওয়েব ডিজাইন ও ওয়েব প্রোগ্রামিং (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 নির্বাচন খুবই গুরুত্বপূর্ণ। তো রঙে রঙে রাঙিয়ে তুলুন আপনার ওয়েব পেজ। সবাই ভাল থাকবেন।

Level 2

আমি অসীম কুমার পাল। বিশ্বের সর্ববৃহৎ বিজ্ঞান ও প্রযুক্তির সৌশল নেটওয়ার্ক - টেকটিউনস এ আমি 15 বছর 6 মাস যাবৎ যুক্ত আছি। টেকটিউনস আমি এ পর্যন্ত 147 টি টিউন ও 469 টি টিউমেন্ট করেছি। টেকটিউনসে আমার 17 ফলোয়ার আছে এবং আমি টেকটিউনসে 0 টিউনারকে ফলো করি।

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

টিউনস

আরও টিউনস

টিউনারের আরও টিউনস

টিউমেন্টস

Level 0

পড়াশোনা বিষয়ক কোন সাইটের ঠিকানা কোন টেকটিউনার ভাইদের জানা থাকলে জানালে খুশি হবো। বিশেষ করে ৮ম,৯ম, ১০ম ও এস.এস.সি পরীক্ষার্থীদের। আমার একটি সাইট জানা ছিল তা হলো http://www.mcqexam.com এটা ৯ম , ১০ম ও এস এস.সি. পরীক্ষার্থীদের জন্য একটি ভাল সাইট ছিল। কিন্তু বর্তমানে তা ওপেন হয়না। কারণ জানি না।

Level 0

rgb দিয়ে যে রং দেয়া যায় সেটা আগে জানতাম বলে মনে হয় না …. ধন্যবাদ।

হেক্সাডেসিমেল কালার কোড নিয়ে আগে একটা ব্যাখ্যামূলক পোস্ট দিয়েছিলাম আমার ব্লগে।

Level 0

অনেক ধন্যবাদ ভাই আপনাকে !

    Level 2

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

    ভাল থাকবেন।

Level 0

অনেক ধন্যবাদ ভাই আপনাকে সালাম এবং ইংরেজী নববরষের শুভেচ্ছা জানাই।

Level 2

ভাই আপনাকেও অনেক ধন্যবাদ এবং ইংরেজী নববর্ষের শুভেচ্ছা ।

Level 0

Happy New year

Level 0

অনেক অনেক ধন্যবাদ চালিয়ে যান। অপেক্ষায় রইলাম আগামী পবের….

Level 3

khub valo laglo. ei tunes ta ki ekhanei sesh , naki aro likhben..Ashay roilam.
Thanks. Thanks and Thanks.

******* Ami ”WYSIWYG Web Builder 6” die ekta page baniechhilam, jeta save korle page gulor .html file ar ekta image folder save hoy. ei total file gulo o folder ta ftp publish korle ..main site e gie dekhchhi text gulo o baground colour gulo aschhe,KINTU KONO IMAGE ASCHHE NA.Image er jayga gulo te right click kore properties dekhle image er nam o location dekhachhe.

local drive theke Browser e publish kore dekhechhi sab thik aschhe.
Domain jekhan theke hosting koriechhilam,tader anno sab domain e erokom kono problem hochhe na.tara amake front page theke webpage bananor janne bolechhilo.ami front page thekeo khub chhotto ekta page banie publish kore dekhechhi…seta teo image gulo aschhe na.
PLEASE HELP ME…….

    Level 0

    @বিপাশা: apni image e je vabe er nam likechen tik sei font{small/capital} er moto kore image source e likin. Tahole online e image dekte parben. Tnx.
    Holo ki na amke janaben plzzzzz.