আসুন শিখি HTML [পর্ব-৯]

কেমন আছেন সবাই।আশা করি সবাই ভাল আছেন।

আজকের বিষয়টা একটু কঠিন।একটু মনোযোগ দিয়ে দেখুন।সহজ লাগবে।আর যদি কোন অংশ না বুঝতে পারেন,তবে আমাকে জানান।যদি আমি জানি তাহলে আপনাদের জানিয়ে দিব।আর বরাবরের মত একটাই কথা কেউ যদি একেবারে নতুন হয়ে থাকেন,তাহলে আগের টিউনগুলো দেখে নিন।নতুবা এই টিউনটি বুঝতে অসুবিধা হবে।

Font color ট্যাগঃ

আমাদের আজকের বিষয় font color ট্যাগ নিয়ে।আমরা কোন লাইন এর বিভিন্ন অক্ষর বা ফন্ট কিভাবে বিভিন্ন রং এ রঞ্জিত করব তা দেখব।

***প্রথমে আমরা font color ট্যাগ এর ফরম্যাট দেখে নেই

<font color = 16 টি মৌলিক কালার যেকোন একটির নাম বা,হেক্সাডেসিমাল কালার কোড যেমনঃ (#6633ff)>..................................................................</font>

***আসুন এবার ব্যাপারগুলো নিয়ে আলোচোনা করি।আপনারা font color এ ১৬টি মৌলিক রং এর যেকোন একটির নাম দিলে ফন্টটি বা অক্ষরটি সেই রঙে রঞ্জিত হবে।এই ১৬ টি রং এর বাহিরে কোন রং এর নাম দিলে ওয়েব সাইট তা দেখাতে পারবে না।এই ১৬ টি রং হচ্ছে black,gray,silver,white,navy,blue,teal,aqua,green,lime,olive,yellow,maroon,red,purple,fuchsia.

***তাহলে কি আমরা এই ১৬ টা রং এর বাহিরে কোন রং ব্যাবহার করতে পারব না?????অবশ্যই পারবেন।সেক্ষেত্রে আপনাদের নাম ব্যাবহার করা চলবে না।আপনাদের হেক্সাডেসিমাল কোড ব্যাবহার করতে হবে।

***এবার আসুন শিখি কিভাবে হেক্সাডেমিকাল কোড ব্যাবহার করবেন।একে  #rrggbb  আকারে প্রকাশ করা হয়।এখানে rr দিয়ে red red,  gg  দিয়ে green green, bb দিয়ে blue blue বুঝাচ্ছে। এখন ধরুন একটা কোড দেওয়া আছে #336633 . এই কোড দিয়ে এমন একটা রং বুঝাচ্ছে যেটাতে rr=33,gg=66,bb=33 ।মানে ওই রংটাতে  ৩৩% red,৩৩% green, ৩৩% blue রং মিশ্রিত অবস্থায় আছে।মনে হয় কিছুটা হলেও বুঝাতে পেরেছি।

***আরেক ধরনের কোড আছে।যেমনঃ #6633ff .এখানে rr=66,gg=33,bb=ff. প্রথম দুইটা দিয়ে বুঝাচ্ছে অই রং এ ৬৬% red, ৩৩% green color আছে।কিন্তু ff দিয়ে কি বুঝায়??? ff দিয়ে সবোর্চ্চ পরিমান বুঝায়।

***উপরের অংশটুকু যারা জটিল পদ্ধতিতে যেতে চান না তাদের জন্য।আর যারা আসল ঘটনাটা জানতে চান তারা এখানে খেয়াল করুন।

{{{এবার আসুন দেখি হেক্সাডেসিমাল ব্যাবহার করা হয়। একে  #RRGGBB  আকারে প্রকাশ করা হয়।rr দিয়ে red,gg দিয়ে green,bb দিয়ে blue বুঝায়।

এই red,green,bue এর সমষ্টি হচ্ছে rgb.এদের প্রত্যেকের মান 0 হতে ২৫৫ এর মধ্যে হবে।মানে এরা প্রত্যেকের মান এককভাবে ০ হতে ২৫৫ এর মধ্যে হবে।

***যদি কোন রং এর মান ২৫৫ আসে তাহলে তা সবোর্চ্চ পরিমান এ আছে আছে বুঝতে হবে।মানে ১২৫ এর বেশি যত বাড়তে থাকবে রংটি তত গাঢ় হবে।১২৫ এর কম হতে থাকলে রং তত হালকা হবে।

***আসুন একটা চার্ট দেখি।চার্ট তা সুত্রের মত কাজ করবে।

decimal          :  0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

hexadecimal :  0 1 2 3 4 5 6 7 8 9  A   B   C   D   E    F

আসুন এবার আমরা একটা সুত্র শিখি  হেক্সাডেসিমাল কোড এর মান কত তা বের করার নিয়মঃ

সুত্র= (যদি কোডটা A,B,C আকারে থাকে তাহলে চার্ট এ তার মান যত তা/ যদি সংখ্যা থাকে যেমন 52 তাহলে তার প্রথম সংখ্যা যেমন এখানে 5  *{গুন}  16) + A,B,C এর মান/যদি সংখ্যা থাকে তাহলে শেষ সংখ্যাটুকু যেমন 2

***আসুন এবার একটা ডেসিমাল কোড দেখি। #CCFF98.আসুন দেখি আমরা এই কোড দিয়ে কি বুঝি। এখানে CC=RR(red),FF=GG(green),98=BB(blue) বুঝাচ্ছে।

এখানে CC= (12*16)+12=204,

FF=(15*16)+15=255,

98=(9*16)+8=152.}}}

***আসুন হেক্সাডেসিমাল কোড এর চার্টটি দেখে নেই।এটি আপনারা যত্ন করে রেখে দিবেন,কারন এটা আপনাদের সবসময় কাঝে লাগবে।আর হেক্সাডেসিমাল কোড এর শুরুতে কিন্তু অবশ্যই হ্যাশ (#) দিতে হবে।

***এবার আসুন উপরের নিয়ম অনুসরন করে একটি html কোডিং তৈরি করি।


<html>

<head>

<title>

আমরাও পারব।

</title>

</head>

<body>

<font color = red>আমরা টেকটিউনসকে ভালবাসি।</font><br>

<font color = olive>টেকটিউনস বাংলাদেশ এর এক নাম্বার টেকি সাইট</font><br>

<font color = aqua>আমরা এখানে টেকনলজি বিষয়ক অনেক কিছু জানতে পারি।</font><br>

<font color = maroon>এখানে সবাই টিউন করতে আসে কোন স্বার্থ ছাড়া</font><br>

<font color = #ccff33>সবাই এখানে আসে কিছু শিখতে</font><br>

<font color = #6633ff>আর,নিজে যা জানে তা শেয়ার করতে</font><br>

<font color = #663300>একটা টিউন করতে সবার কয়েক ঘন্টা লাগে,অনেক কষ্টের পর একটা টিউন লেখা হয়</font><br>

<font color = #999900>আমাদের সবার উচিত কিছু না কিছু কমেন্ট করা</font><br>

<font color = #9900cc>একজন টিউনার ঘণ্টার পর ঘণ্টা সময় নিয়ে কিছু লেখে সুন্দর কিছু কমেন্ট পাওয়ার জন্য</font><br>

<font color = #003333>একটা সুন্দর কমেন্ট একজন টিউনারকে সামনে ভাল টিউন করতে উথসাহিত করে</font><br>

<font color = yellow>আসুন আমরা টেকটিউনসকে সাম্নের দিকে এগিয়ে নিয়ে যাই।</font>

</body>

</html>

***তারপর তা aur.html নামে সেভ করে double click করে ওপেন করুন।তারপর দেখুন

***জানি না আপনাদের বুঝাতে পেরেছি কিনা।আমি আমার সবটুকু দিয়ে চেষ্টা করেছি আপনাদের বুঝানোর জন্য।যদি আমার টিউটোরিয়াল আপনাদের কাঝে লাগে তবে আমার কষ্ট সার্থক।সবাই ভাল থাকবেন।

Level 0

আমি সাবিহা। বিশ্বের সর্ববৃহৎ বিজ্ঞান ও প্রযুক্তির সৌশল নেটওয়ার্ক - টেকটিউনস এ আমি 14 বছর 5 মাস যাবৎ যুক্ত আছি। টেকটিউনস আমি এ পর্যন্ত 98 টি টিউন ও 753 টি টিউমেন্ট করেছি। টেকটিউনসে আমার 3 ফলোয়ার আছে এবং আমি টেকটিউনসে 0 টিউনারকে ফলো করি।

খুব সাধারন একটি মানুষ।সারাদিন কম্পিউটার নিয়ে পড়ে থাকি।মুভি দেখি,ব্লগ এ ব্লগ এ ঘুরাঘুরি করি।পড়ালেখা করতে বরাবরই ভয় লাগে। আর ফেসবুক এ একটা পেজ খুলেছি।যারা সময় পাবেন একটু ঢু মেরে আসবেন।


টিউনস


আরও টিউনস


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


টিউমেন্টস

কিন্তু ff দিয়ে কি বুঝায়??? ff দিয়ে full(সম্পূর্ণ) বুঝায়।মানে এখানে blue full মানে ১০০% আছে।

এই ব্যাপারটিতে আপনার সাথে একমত হতে পারলাম না।
কারন এখানে #6633ff দ্বারা যা বুঝায় তা হল RGB এর HEX অনুপাত।
HEX হিসেবে সংখা গুলো হল –
1 2 3 4 5 6 7 8 9 A B C D E F
সুতরাং এখানে F মানে HEX এর ১৫ তম মান।

এই সংখাগুলোকে মূলত Red:Green:Blue বা R:G:B অনুপাতে বসানো হয়। আর সামনের # চিহ্নটি হল HEX এর প্রতীক।
আশাকরি রাগ না করে ব্যপারটি বুঝতে এবং বোঝাতে সক্ষম হবেন।

আপনার টিউনের জন্য ধন্যবাদ।

    আমি আসলে সহজ ভাষায় বুঝাতে চেয়েছি।আর আমার একটা ভুল হয়েছে।আমি সবোর্চ্চ পরিমান এর বদলে সম্পূর্ণ শব্দটা ব্যাবহার করেছি।আর decimal,hexadecimal,hexadecimal law সবকিছু দিয়ে বুঝাতে গেলে আমি ঠিক বুঝাতে পারব না।
    আর আমার ভুল ধরিয়ে দেওয়ার জন্য অনেক ধন্যবাদ।

      হেক্স অনুপাতের ব্যাপারটা টিউন এ অ্যাড করে দিয়েছি।এবার দেখেন তো ঠিক আছে কিনা।

প্রোগ্রামিং আমার মাথায় কিছুই ঢোকেনা!!! সেই জন্যে ইচ্ছি থাকলেও উপায় নাই!!! আপনার সবগুলো টিউন আমি মোনোযোগ দিয়ে পড়ি… তবুও আপনাকে অনেক অনেক ধন্যবাদ সবার সাথে শেয়ার করার জন্য, ভাল থাকবেন…

    ভাই html তো পোগ্রামিং না।আর এটা তো অনেক সহজ।প্রোগ্রামিং তো অনেক কঠিন ব্যাপার।আপনি প্রথম থেকে সুরু করেন সব সহজ মনে হবে।

Level 0

আপু কোন সাইটের কপি বন্ধ করার কোডিং নিয়ে কি লিখবেন। সবধরনের কপি

    ভাইয়া আমি আসলে কপি বন্ধ করার নিয়ম ঠিকমত জানি না।আপনি যতই কপি প্রোটেকটেড করেন না কেন ctrl আর U একসাথে চাপলে সব কোড আকারে বেরিয়ে আসে।আর কপি বন্ধ করার কিছু java script কোড আছে।আমি সেগুলো পেলে আপনাকে জানাব।

আমিও হেক্সডেসিমেল কালার কোড নিয়ে একদা পোস্ট দিয়েছিলাম 🙂
http://forum.projanmo.com/t726.html

    ঊল্টোভাবে কিভাবে কোড থেকে কালার বের করতে হয় তা জানতাম না।আজকে জানলাম।আপনার লেখাটি অনেক সুন্দর হয়েছে।

Level 0

আপু লিখছেন না কেন । আপনি লিখেন আপনার লেখা সুন্দর হয়েছে। আপনি প্রতিদিন ৪-৫ তা করে লিখেন ।তাহলে আমি খুশি হব ।

দারুন, কাজে লাগবে ধন্যবাদ।

দারুন একেবারে রঙ্গিন

Level 0

হুহুহুহুহম কিছুটা কঠিন

Level 0

ami ei site a new.apnar 1-8 ta porbo sesh korsi.uprwalar rohomote kono problem hoinai.tobe 9 a eshe ektu prblm dekha dse.amr pc te kno colour e shw krena.ki kora jay?janaben. tnx

Level 0

আপু আপনাকে অনেক ধন্যবাদ এটা টিউন করার জন্য। দয়া করে TOTAL HTML টা টিউন করবেন। কারন HTML শেথার এর চেয়ে কোন সহজ পদ্ধতি মনে হয় নাই।

Level 0

khub valo laglo. Apnake oshesh thanks.

3School.com a onak problem face korta cilam………..jak akon amar jonno onak valo holo banglai sob easily bujta partaci

Level 0

@সাবিহা আপু আপনাকে ধন্যবাদ অন্যকে সামান্য করে হলেও সেখাতে চেষ্টা করার জন্য।এতো কঠিন করে না শিখে শুধু Photoshop থেকে Color select করে নিয়ে এসে HTML এ Paste করলেই ঝামেলা শেষ। এতে করে কালার Perfect টা পাওয়া যায়।

Level 0

thanks

nice vai