একজন দক্ষ ফ্রিল্যান্সার গড়ার লক্ষে দেশে এই প্রথম জাগোরিক নিয়ে এসেছে বাংলা এইচটিএমএল টিউটোরিয়াল আর্টিকেল যার এই পর্বে থাকছে এইচটিএমএল কালার কোড ও ফ্রেম সম্পর্কে বিস্তারিত।
এটি হচ্ছে বাংলা এইচটিএমএল টিউটোরিয়াল Part-7 এরই ধারাবাহিকতায় আমরা HTML এর সম্পূর্ণ সিরিজ শেষ করার চেষ্টা করব। সকল পর্বের টিউটোরিয়াল এখানে ক্লিক করলে পেয়ে যাবেনঃ এইচটিএমএল টিউটোরিয়াল
এইচটিএমএল কালার কোড ও ফ্রেম (Color & Frame: Part-7)
HTML COLOR CODE:
এইচটিএমএল এ যেকোন এলিমেন্ট এর রং সেট করার তিনটি পদ্ধতি আছে। ১. রংয়ের নাম দিয়ে, ২. রংয়ের RGB মান দিয়ে এবং ৩. রংয়ের হেক্সাডেসিমাল মান দিয়ে
১. রংয়ের নাম দিয়ে
আপনি সরাসরি রংয়ের নাম ব্যবহার করে একটা এইচটিএমএল এলিমেন্টে রং দিতে পারেন। সাধারন কিছু কালার যেমন black, white, red ইত্যাদি। এইচটিএমএল এ কালার value লেখার সময় সরাসরি এদের নাম লেখা হয়। নিচে ১৬টি মৌলিক কালারের নাম লেখা হল।
| Black | Gray | Silver | White | ||||
| Yellow | Lime | Aqua | Fuchsia | ||||
| Red | Green | Blue | Purple | ||||
| Maroon | Olive | Navy | Teal |
উদাহরন
01.<html>02.<head>03.<title>HTML Color Tutorial | Jagorik</title>04.</head>05.<bodybgcolor="red">06.<pstyle="background:black;">Bangladesh is a country of natural beauty</p>07.<pclass="Jagorik">Jagorik DOT com is the largest bengali tutorial site</p>08.</body>09.</html>
২. RGB মান মান দিয়ে
আমি আপনাদেরকে নিরাপদ web design এর জন্য HTML rgb ব্যবহারের পরামর্শ দেব না কারন Non-IE browser, HTML rgb সাপোর্ট করে না। আপনারা যদি CSS শিখতে চান তাহলে আপনাদের উচিত এই বিষয় সম্বন্ধে জানা।
Red, Green এবং Blue এই তিনটি কালারের সমষ্টি হচ্ছে rgb । প্রত্যেকের মান ০(যখন কোন কালার থাকে না) হতে ২৫৫(যখন ঐ কালারটি সম্পুর্ন থাকে)। rgb ফরমেটটি হল rgb(RED,GREEN,BLUE)।
Red, Green এবং Blue এর মান:
| bgcolor=”rgb(255,255,255)” | White |
| bgcolor=”rgb(255,0,0)” | Red |
| bgcolor=”rgb(0,255,0)” | Green |
| bgcolor=”rgb(0,0,255)” | Blue |
- আরও পড়ুনঃ বাংলা এইচটিএমএল টিউটোরিয়াল (Introduction: Part-1)
- আরও পড়ুনঃ এইচটিএমএল ট্যাগ ও এট্রিবিউট (Tag & Attribute: Part-2)
- আরও পড়ুনঃ এইচটিএমএল প্যারাগ্রাফ ও হেডিং (P tag & Heading: Part-3)
- আরও পড়ুনঃ এইচটিএমএল লিস্ট ও ফন্ট (HTML List & Font: Part-4)
- আরও পড়ুনঃ এইচটিএমএল লিংক ও এনটাইটিজ (Link & Entities: Part-5)
এইচটিএমএল ব্যাকগ্রাউন্ড
এইচটিএমএল ফ্রেম দিয়ে একটা ওয়েব পেজকে দুই বা ততোধিক ভাগে ভাগ করা যায়। ডিভের ব্যাপারটা চিন্তা করুন, প্রতিটি ডিভে যেমন আলাদা আলাদা কনটেন্ট দেয়া যায় তেমনি প্রত্যেকটি ফ্রেমে আলাদা আলাদা পেজ লোড করানো যায়।
ধরুন আপনার একটি পেজে ৩টি ফ্রেম আছে, আপনি চাইলে যেকোন একটিকে রিলোড করাতে পারেন (পুরো পেজ লোড করানো ছাড়াই)। একটা পেজে কয়েকটি ফ্রেম থাকলে সেটাকে বলে ফ্রেমসেট। <frameset></frameset> এর ভিতরে <frame></frame> রাখতে হয়।
যেমন নিচের উদাহরনের কোডটুকু frame_example.html নামে সেভ করুন এবং ৯, ১০ ও ১১ নং লাইনে দেখুন প্রতিটি এক একটি ফ্রেম।
প্রথম ফ্রেমে top.html নামে আরেকটি পূর্নাঙ্গ এইচটিএমএল পেজ তৈরী করে ঢুকিয়ে দিয়েছি।
এভাবে পরের দুটিতেও middle.html এবং bottom.html নামে দুটি পেজ দিয়েছি। এখন যখনি frame_example.html খুলবেন তখন এই পেজটির ভিতর top.html, middle.html এবং bottom.html এর কনটেন্ট দেখাবে।
অর্থ্যাৎ একটা পেজের ভিতর ৩টি পেজ দেখাবে।
01.<?xmlversion="1.0"encoding="iso-8859-1"?>02.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"03."http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">04.<html>05.<head>06.<title> Jagorik Frame Tutorial </title>07.</head>08.<framesetrows="200,100,*">09.<framesrc="/top.html"/>10.<framesrc="/middle.html"/>11.<framesrc="/bottom.html"/>12.<noframes>13.<body>14.This site uses a technology called frames. Unfortunately, your15.browser does not support this technology. Please upgrade16.your browser and visit us again!17.</body>18.</noframes>19.</frameset>20.</html>
প্রদর্শন:
==> <noframes></noframes> দেয়া হয়েছে যদি আপনার ব্রাউজার ফ্রেম সাপোর্ট না করে তাহলে এর ভিতরের মেসেজটি দেখাবে।
<frame src=”/top.html”/> এখানে src তে পেজের লিংক ঠিকভাবে দিতে হবে।
==> < frameset rows=”200,100, * > এটা দিয়ে বোঝানো হয়েছে প্রথম ফ্রেমটি (top.html) টি ২০০ পিক্সেল উচু হবে পরেরটি ১০০ এবং শেষেরটি বাকি অংশ নিয়ে নেবে (* চিহ্ন)।
এইচটিএমএল কালার কোড ও ফ্রেম –
HTML 5 এ ফ্রেম সাপোর্ট করেনা তাই ফ্রেম নিয়ে বেশি আলোচনা করবনা। ধীরে ধীরে এর ব্যবহার উঠে যাচ্ছে।
উপরের উদাহরনে তাই দেখুন XHTML DOC type ব্যবহার করেছি HTML 5 এর পরিবর্তে।
HTML 5 এ ফ্রেম সরিয়ে ফেলার কারনে এইসমস্ত কাজের জন্য iframe নামে একটা ট্যাগ ব্যবহার করা হয়।
iframe বা inline frame দিয়ে এইচটিএমএল ডকুমেন্টে সম্পূর্ন ভিন্ন একটি অংশ ঢুকিয়ে দেয়া যায় যেখানে ভিন্ন কোন ওয়েব পেজ প্রদর্শিত হবে।
01.<!DOCTYPE html>02.<html>03.<head>04.<title> Jagorik Frame Tutorial </title>05.</head>06.<body>07.<iframewidth="100%"src="http://www.Jagorik.com">08.Your browser does not support iframe tag09.</iframe>10.</body>11.</html>
src এট্রিবিউটে কোন লোকাল ফাইলও দিতে পারেন, আমি একটা URL দিয়েছি। এছাড়া আরো অনেক এট্রিবিউট ব্যবহার করা যায় তবে বেশিরভাগই HTML 5 এ সাপোর্টেড নয়। HTML 5 এ উপরে ব্যবহৃত দুটি (src এবং width) সাপোর্ট করে সাথে সাথে নিচেরগুলি
name : iframe এর নাম দেয়া যায়। যেমন
1.<iframename="wchbd"width="100%"src="http://www.Jagorik.com">2.Your browser does not support iframe tag3.</iframe>
seamless=”seamless” দিলে iframe এমন দেখাবে যেন এটা এই পেজেরই অংশ
1.<iframename="wchbd"width="100%"src="http://www.Jagorik.com"seamless="seamless">2.Your browser does not support iframe tag3.</iframe>
srcdoc=”html content” এই এট্রিবিউটের মান এইচটিএমল এলিমেন্ট দিতে পারেন ফলে সেটা iframe এর ভিতর দেখাবে।
এইচটিএমএল কালার কোড ও ফ্রেম –
উক্ত বিষয় সম্পর্কে কিছু জানার থাকলে কমেন্ট করতে পারেন।
আমাদের সাথে ইউটিউব চ্যানেলে যুক্ত হতে এখানে ক্লিক করুন এবং আমাদের সাথে ফেইজবুক পেইজে যুক্ত হতে এখানে ক্লিক করুন।
গুরুত্বপূর্ণ আপডেট ও তথ্য পেতে আমাদের ওয়েবসাইটে ভিজিট করুন।
