Color
এইচটিএমএল এ যেকোন এলিমেন্ট এর রং সেট করার তিনটি পদ্ধতি আছে। ১. রংয়ের নাম দিয়ে, ২. রংয়ের 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 | Webcoachbd</title>04.</head>05.<body bgcolor="red">06.<p style="background:black;">Bangladesh is a country of natural beauty</p>07.<p class="webcoachbd">Webcoachbd 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 |
৩. রংয়ের হেক্সাডেসিমাল মান দিয়ে
এইচটিএমএল এ যেকোনো এলিমেন্টের রং নির্ধারণের জন্য হেক্সাডেসিমাল কালার কোড ব্যবহার করা যায়। হেক্সাডেসিমাল কোড সাধারণত # চিহ্ন দিয়ে শুরু হয় এবং এরপর ৬টি সংখ্যা বা অক্ষর থাকে যা রঙকে নির্দেশ করে। এই কোডের প্রথম দুটি সংখ্যা লাল (R), মাঝের দুটি সবুজ (G), এবং শেষ দুটি নীল (B) রঙের মান বোঝায়। প্রতিটি রঙের মান ০০ থেকে FF পর্যন্ত হতে পারে।
উদাহরণ:
ধরা যাক, একটি প্যারাগ্রাফ ট্যাগের রং লাল করতে হবে। তাহলে কোড হবে:
<p style="color: #FF0000;">This is a red paragraph.</p>
এখানে:
#FF0000মানটি পুরোপুরি লাল বোঝাচ্ছে, যেখানে লাল (R) এর মানFF, সবুজ (G) এবং নীল (B) এর মান00।
অন্যান্য উদাহরণ:
- সবুজ:
#00FF00 - নীল:
#0000FF - কালো:
#000000 - সাদা:
#FFFFFF
CSS ফাইলে ব্যবহারের পদ্ধতি:
একটি আলাদা CSS ফাইলে রং সেট করতে, নিচের মতো কোড লিখুন:
p {
color: #FF5733;
}
Frame
এইচটিএমএল ফ্রেম দিয়ে একটা ওয়েব পেজকে দুই বা ততোধিক ভাগে ভাগ করা যায়। ডিভের ব্যাপারটা চিন্তা করুন, প্রতিটি ডিভে যেমন আলাদা আলাদা কনটেন্ট দেয়া যায় তেমনি প্রত্যেকটি ফ্রেমে আলাদা আলাদা পেজ লোড করানো যায়।
ধরুন আপনার একটি পেজে ৩টি ফ্রেম আছে, আপনি চাইলে যেকোন একটিকে রিলোড করাতে পারেন (পুরো পেজ লোড করানো ছাড়াই)। একটা পেজে কয়েকটি ফ্রেম থাকলে সেটাকে বলে ফ্রেমসেট। <frameset></frameset> এর ভিতরে <frame></frame> রাখতে হয়। যেমন নিচের উদাহরনের কোডটুকু frame_example.html নামে সেভ করুন এবং ৯, ১০ ও ১১ নং লাইনে দেখুন প্রতিটি এক একটি ফ্রেম। প্রথম ফ্রেমে top.html নামে আরেকটি পূর্নাঙ্গ এইচটিএমএল পেজ তৈরী করে ঢুকিয়ে দিয়েছি। এভাবে পরের দুটিতেও middle.html এবং bottom.html নামে দুটি পেজ দিয়েছি। এখন যখনি frame_example.html খুলবেন তখন এই পেজটির ভিতর top.html, middle.html এবং bottom.html এর কনটেন্ট দেখাবে। অর্থ্যাৎ একটা পেজের ভিতর ৩টি পেজ দেখাবে।
01.<?xml version="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> Webcoachbd Frame Tutorial </title>07.</head>08.<frameset rows="200,100,*">09.<frame src="/top.html"/>10.<frame src="/middle.html"/>11.<frame src="/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> Webcoachbd Frame Tutorial </title>05.</head>06.<body>07.<iframe width="100%" src="http://www.webcoachbd.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.<iframe name="wchbd" width="100%" src="http://www.webcoachbd.com">2.Your browser does not support iframe tag3.</iframe>
seamless="seamless" দিলে iframe এমন দেখাবে যেন এটা এই পেজেরই অংশ
1.<iframe name="wchbd" width="100%" src="http://www.webcoachbd.com" seamless="seamless">2.Your browser does not support iframe tag3.</iframe>
srcdoc="html content" এই এট্রিবিউটের মান এইচটিএমল এলিমেন্ট দিতে পারেন ফলে সেটা iframe এর ভিতর দেখাবে।
Layout
এইচটিএমএল লেআউট হল খুব মৌলিক বিষয়। টেবিলের ভিতর টেবিল স্থাপন করে এইচটিএমএল
লেআউট তৈরী করা হয়।
** বর্তমানে লেআউট ডিভ (div এলিমেন্ট) ব্যবহার করে বানানো হয়। টেবিল দিয়ে কখনই লেআউট বানাবেন না। টিউটোরিয়ালটি দেয়া আছে তাই মোছা হলনা। টেবিল দিয়েও যে লেআউট বানানো যায় এবং আগে সব লেআউট এভাবেই বানানো হত এটা জানার জন্যই শুধু টিউটোরিয়ালটি।
1.<table bgcolor="black" border="1" heigh="200" width="300">2.<tr><td>3.<table bgcolor="white" heigh="100" width="100">4.<tr><td>Tables inside tables!</td></tr>5.</table>6.</td></tr></table>প্রদর্শন: টেবিলের ভিতর টেবিল
|
এইচটিএমএল স্টান্ডার্ড লেআউট
Standard layout সাধারনত উপরে অবস্থিত ব্যানার, নেভিগেশন এবং content বা প্রদর্শন বক্স। এগুলো হলো
ভাল ওয়েব সাইট এর বৈশিষ্ট্য।
01.<table cellspacing="1" cellpadding="0" border="0"02.bgcolor="black" height="250" width="400">03.<tr height="50"><td colspan="2" bgcolor="white">04.<table title="Banner" id="banner" border="0">05.<tr><td>Place a banner here</td></tr>06.</table>07.</td></tr>08.<tr height="200"><td bgcolor="white">09.<table title="Navigation" border="0">10.<tr><td>Links!</td></tr>11.<tr><td>Links!</td></tr>12.<tr><td>Links!</td></tr>13.</table>14.</td><td bgcolor="white">15.<table title="Content" id="content" border="0">16.<tr><td>Content goes here</td></tr>17.</table>18.</td></tr></table>প্রদর্শন:
01.<table title="Shell" height="250" width="400"02.border="0" bgcolor="black" cellspacing="1" cellpadding="0">03.<tr height="50"><td bgcolor="white">04.<table title="banner" id="banner">05.<tr><td>Banner goes here</td></tr>06.</table>07.</td></tr>08.<tr height="25"><td bgcolor="white">09.<table title="Navigation" id="navigation">10.<tr><td>Links!</td>11.<td>Links!</td>12.<td>Links!</td></tr>13.</table>14.</td></tr>15.<tr><td bgcolor="white">16.<table title="Content" id="content">17.<tr><td>Content goes here</td></tr>18.</table>19.</td></tr></table>
Comments
আপনার এইচটিএমএল ডকুমেন্টের কোন অংশ চাইলে কমেন্ট করে রাখতে পারে তাহলে এই অংশটুকু আর ব্রাউজারে দেখাবেনা। অন্য কোন ডেভেলপার বা আপনিই যদি অনেক পরে সেই ডকুমেন্ট দেখেন তখন বুঝতে সুবিধা হয় কোন কোড কিসের জন্য লিখেছিলেন। তাই কোড কমেন্ট করা ভাল প্রাকটিস তবে করা জরুরী নয়। start tag <!-- এবং end tag --> এর মাঝে থাকা সব কমেন্ট হেয় থাকে। যেমন
01.<!-- menu section -->02.<ul>03.<li><a href="#">Item 1</a></li>04.<li><a href="#">Item 1</a></li>05.<li><a href="#">Item 1</a></li>06.</ul>07. 08.<!-- comment block -->09. 10.<div id="comment">11. 12.<p>There are few browsers who supports <comment> tag to comment a part of code.</p>13.</div>একসাথে একাধিক লাইনও কমেন্ট করে রাখতে পারেন। এভাবে কমেন্ট করার প্রধান উদ্দেশ্য কোডের জন্য একটা ডকুমেন্টেশন বানানো যাতে পরে কোড দেখে বোঝা যায় কোন অংশ কিসের জন্য লেখা হয়েছে।
01.<!--02.This part will effect only 320px on responsive view.This is not for large desktop03. 04.-->05.<div id="col-lg-5 col-md-5 col-sm-5">06.<ul>07.<li><a href="#">Item 1</a></li>08.<li><a href="#">Item 1</a></li>09.<li><a href="#">Item 1</a></li>10.</ul>11. 12.</div>এছাড়া কন্ডিশনাল কমেন্ট দেয়া যায় এটা শুধু ইন্টারনেট এক্সপ্লোরারের জন্য কাজ করে থাকে। যেমন অনেক সময় আমরা অতিরিক্ত স্ক্রিপ্ট বা সিএসএস ফাইল ব্যবহার করি IE এর জন্য। যেমন
1.<!--[if lt IE 9]>2.<script src="/media/jui/js/html5.js"></script>3.<![endif]-->এটা শুধু IE 9 এর জন্য কাজ করবে।
কোন কোডও যদি কমেন্ট ট্যাগের ভিতর রাখেন সেটা ব্রাউজারে দেখাবেনা উপরের দুটি উদাহরনের যেকোনটিতে কোডের আগে পরে <!-- এবং --> দিয়ে ব্রাউজারে রান করিয়ে দেখুন সেই অংশটুকু দেখাবেনা।
![এক্সএমএল - XML : ৮ [XML Elements]](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisymurbCebTBxApDvlyc-eLtsgysafLxdPpmO87iLj1jba_Lqf8hmCQKIE8gZKDJGF7kxbtp5zZdkwwudi4-xcNbcbgRiSrKcfEngGTMdySQn8O36QawRkYewevV3PnWhBCmpYr6ROs-uifpKee8WlfIPcLZ-IDlA1sucBcl7Lfp9wFjp7mAYU4wGlSier/s72-c/image.png)
![এক্সএমএল - XML : ৭ [XML Tree, XML Syntax]](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmqbhhcIBSKP0FsgizxpqgcpflVV6MdhugNnZ45N_u6ecEDHH1z_2Y3KtNUdVPAOqazWQtn7engNJHKWm0SgXEQSNe5ljqxJ_16IQHbFJ3Gng8PaqEqCVOpnuIIpS0k2JdvzseaVviFve1BiDS_wnthJ-s_Q-PBc_WynPjh1BBZ70bEMATalaahrxsUE49/s72-c/image.png)
![এক্সএমএল - XML : ৬ [XML Namespace]](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvLqrmBvBM_mUT6rnN7-5MKkquleOCReFetdrxqRebHpJM-zBe6wO74Iz-rxF36SJXzL1Hd2CmM0A_65oVgLEwzmVQUXH8tA2cqOEDzK5G5_7XUtIkGwG2Xra9tsYWboGcOLqBzpHM3tQk5jTbr5e6Q9bf-5UUucERV-PPNKaclpzAVOZ0ImBJSoVncMr2/s72-c/image.png)