এইচটিএমএল ক্রমিক লিস্ট (HTML ordered lists continued)
আরও চার প্রকারের ধারাবাহিক লিস্ট(ordered list) রয়েছে। এগুলো সাধারন ১, ২, ৩ নম্বরের পরিবর্তে রোমান নম্বর বা বর্ণ হতে পারে তা বড় হাতের বা ছোট হাতের। type attribute ব্যবহার করে নম্বর পরিবর্তন করা হয়।
1.<ol type=”a”>
2.<ol type=”A”>
3.<ol type=”i”>
4.<ol type=”I”>
Ordered List Types:
Lower-Case Letters
Upper-Case Letters
Lower-Case Numerals
Upper-Case Numerals
এইচটিএমএল বিনাক্রম লিস্ট (HTML unordered lists)
<ul> ট্যাগ সাহায্যে বুলেট লিস্ট তৈরী করা হয়। বুলেট লিস্ট আবার তিন প্রকার যেমন ১. squares ২.discs ৩.circles। default হিসাবে সাধারনত full discs ব্যবহার করা হয়।
1.<h4 align=”center”>Shopping List</h4>
2.<ul>
3.<li>Milk</li>
4.<li>Toilet Paper</li>
5.<li>Cereal</li>
6.<li>Bread</li>
7.</ul>
প্রদর্শন:
Shopping List
আমরা type attributes ব্যবহার করে unordered list এর অন্যান্য বুলেট ব্যবহার করতে পারি।
<ul type=”square”>
<ul type=”dics”>
<ul type=”circle”>
type=”square”
type=”disc”
type=”circle”
এইচটিএমএল ডেফিনেশন লিস্ট (HTML definition lists)
Definition list এর ব্যবহার সাধারনত অভিধানে দেখতে পাই। <dl> tag ব্যবহার করে Definition list তৈরী করা হয়। যাকে Define অর্থ্যাৎ সংজ্ঞায়িত করতে চাই তাকে bold আকারে দেখানো উচিত। Definition list tag এর মধ্যে আরও দুটি tag অর্ন্তভুক্ত সেগুলো হলো ১. <dt> ২. <dd>।
<dl> tag: লিস্ট এর শুরু জন্য এই ট্যাগ ব্যবহার করা হয়।
<dt> tag: যাকে সংজ্ঞায়িত(Define) করবো এই ট্যাগ ব্যবহার করে তার নাম লেখা হয়।
<dd> tag: <dt> tag এ যে নাম লেখা হয়েছে তার সম্পর্কে এখানে আলোচনা হয়।
1.<dl>
2.<dt><b>Fromage</b></dt>
3.<dd>French word for cheese.</dd>
4.<dt><b>Voiture</b></dt>
5.<dd>French word for car.</dd>
6.</dl>
প্রদর্শন:
Fromage
French word for cheese.
Voiture
French word for car.
এইচটিএমএল কালার কোড টিউটোরিয়াল (HTML Color code)
Color set করার তিনটি পদ্ধতি আছে। সাধারন কিছু কালার যেমন কালো, সাদা, লাল, সবুজ, নীল। এইচটিএমএল এ কালারvalue লেখার সময় সরাসরি এদের নাম লেখা হয়। নিচে ১৬টি মৌলিক কালারের নাম লেখা হল।
১৬টি মৌলিক কালার:
Black
Gray
Silver
Whit
Yellow
Lime
Aqua
Fuchsia
Red
Green
Blue
Purple
Maroon
Olive
Navy
Teal
এইচটিএমএল-রং পদ্ধতি আরজিবি মান (HTML- Coloring system: rgb value)
আমি আপনাদেরকে নিরাপদ 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
এইচটিএমএল-রং পদ্ধতি:হেক্সাডেসিমাল (HTML- Coloring system: Hexadecimal)
প্রথম প্রথম Hexadecimal system বুঝতে একটু কারন এই system একটু জটিল ও কঠিন। practice করার মাধ্যমে বিষয়টি অনেক সহজ হয় যাবে। এই Hexadecimal system সকল ক্ষেত্রে গ্রহনযোগ্য এবং বহুল ব্যবহৃত। Hexadecimal system টি ইন্টারনেটের standard color।
Hexadecimal হল ৬ digit কালারের উপস্থাপন। প্রথম দুটি digit(RR), Red value নির্দেশ করে পরবর্তি দুটিdigit(GG), Green value নির্দেশ করে এবং সর্বশেষ দুটি digit(BB), Blue value নির্দেশ করে।
এইচটিএমএল হেক্সাডেসিমাল রং
bgcolor=”#RRGGBB”
এইচটিএমএল -রং কোড (HTML- Color code: breaking the code)
নিচে টেবিলে দেখানো হয়েছে কিভাবে বর্ণ Hexadecimal system এর Numbering system কে বর্ধিত করে ১৬digit এ উন্নীত করে।
Decimal
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
Hexadecimal
1
2
3
4
5
6
7
8
9
A
B
C
D
E
F
তাই বর্ণকে নম্বর হিসাবে ব্যবহার করা হয়। এই বর্ণকে পরে নম্বরে রুপান্তর করা হয়। নিচে একটি উদাহরন দেয়া হলো।
একটি বাস্তব হেক্সাডেসিমাল:
bgcolor=”#FFFFFF”
এখানে “F” হচ্ছে সবোর্চ্চ পরিমান এবং এই কালারটি (“#FFFFFF”) সাদা কালার নিদের্শ করে। নিচে বিষয়টি বিস্তারিত আলোচনা করা হয়েছে।
হেক্সাডেসিমাল সূত্র:
(15 * 16) + (15) = 255
উপরের সূত্রটি বাস্তব। প্রথমে F এর মান(১৫) কে ১৬ দ্বারা গুন করে পরবর্তি মানের সাথে যোগ করতে হবে। ২৫৫ মানটি যেকোন প্রাথমিক কালারের মানের ক্ষেত্রে সর্বোচ্চ। নিচে আরও উদাহরন দেয়া হলো।
উদাহরন:
bgcolor=”#CC7005″
CC(RR – Red)
(12 * 16) + (12) = 204
70(GG – Green)
(7 * 16) + (0) = 112
05(BB – Blue)
(0 * 16) + (5) = 5
এইচটিএমএল ফন্ট টিউটোরিয়াল (HTML Font Tutorial in Bangla)
<font> ট্যাগ ব্যবহার করে ওয়েব সাইটের টেক্সটের স্টাইল, সাইজ এবং কালার যোগ করা হয়। size, color এবং face attributes ব্যবহার করে আপনি ফন্ট কে কাস্টমাইজ করতে পারি। <basefont> ট্যাগ ব্যবহার করে পেজের সকল টেক্সটকে একই স্টাইল, সাইজ এবং কালার এ সেট করা যায়।
<font> এবং <basefont> ট্যাগ ব্যবহার না করে সিএসএস(সিএসএস টিউটোরিয়ালে আলোচনা করা হয়েছে) ব্যবহার করা উচিত।
ফন্ট আকার (Font size)
Size attribute এর সাহায্যে ফন্ট এর সাইজ ঠিক করা হয়। ফন্ট এর আকার এর গ্রহনযোগ্য মান হচ্ছে ১(সবচেয়ে ছোট) হতে ৭(সবচেয়ে বড়)। ফন্ট এর ডিফল্ট আকার হচ্ছে ৩।
1.<p>
2.<font size=”5″>Here is a size 5 font</font>
3.</p>{}
প্রদর্শন:
Here is a size 5 font.
ফন্ট রং (Font color)
কালার attribute এর সাহয্যে font এর color সেট করা হয়।
1.<font color=”#990000″>This text is hexcolor #990000</font>
2.<br />
3.<font color=”red”>This text is red</font>
প্রদর্শন:
This text is hexcolor #990000
This text is red
ফন্ট ফেস (Font face)
ফন্ট face এর ক্ষেত্রে সতর্ক হওয়া উচিত কারন আপনার সিস্টেম এ নির্ধারিত ফন্ট টি ইনস্টল দেয়া না থাকে তাহলে আপনিঐ ফন্ট টি দেখতে পাবেন না এবং তার পরিবর্তে ডিফল্ট হিসাবে Times New Roman ফন্ট টি দেখতে পাবেন।
1.<p>
2.<font face=”Bookman Old Style, Book Antiqua, Garamond”>This paragraph
3.has had its font…</font>
4.</p>
প্রদর্শন:
This paragraph has had its font formatted by the font tag!
বেসফন্ট (Basefont)
Basefont ট্যাগ এর সাহায্যে আপনি ওয়েব পেজের ডিফল্ট ফন্ট সেট করতে পারেন। নিচে basefont ব্যবহার করার সঠিকপথ দেখানো হল।
01.<html>
02.<body>
03.<basefont size=”2″ color=”green”>
04.<p>This paragraph has had its font…</p>
05.<p>This paragraph has had its font…</p>
06.<p>This paragraph has had its font…</p>
07.</basefont>
08.</body>
09.</html>
প্রদর্শন:
This paragraph has had its font formatted by the basefont tag!
This paragraph has had its font formatted by the basefont tag!
This paragraph has had its font formatted by the basefont tag!
শেষে বলতে চাই font বা basefont ব্যবহার না করে সিএসএস (সিএসএস টিউটোরিয়ালে আলোচনা করা হয়েছে) ব্যবহার করা ভালো।
Attributes: Review
Attribute=
“Value”
Description
size=
“Num. Value 1-7”
Size of your text, 7 is biggest
color=
“rgb, name, or hexidecimal”
Change font color
face=
“name of font”
Change the font type
Prothom okkhorer shundor style:
ফন্ট কে কাস্টমাইজ করে যেকোন ধরনের স্টাইল করা যায়।
1.<p><font size=”7″ face=”Georgia, Arial” color=”maroon”>C</font>ustomize
2.your font to achieve a desired look.</p>
প্রদর্শন:
Customize your font to achieve a desired look.
এইচটিএমএল লিংক টিউটোরিয়াল
আপনি চাইলে আপনার সাইটের কোন টেক্সটের উপর লিংক তৈরী করে দিতে পারেন যেখানে ক্লিক করলে অন্য পেজ/সাইটআসবে। anchor tag এর সাহায্যে লিংক তৈরী করা হয়। শুধু টেক্সট নয় আপনি চাইলে একটা মেইল এড্রেসের উপর লিংকদিতে পারেন, একটা ছবির উপর লিংক দিতে পারেন, বড় কোন ওয়েব পেজের সুচিপত্র তৈরী করে এর আইটেমগুলিতে লিংক দিতে পারেন (এসব লিংকে ক্লিক করলে পেজেরই ঐ অংশে যাবে যেখান থেকে আইটেমটি শুরু হয়েছে)।
হাইপারটেক্সক্ট রেফারেন্স(href)
href এট্রিবিউট নিদের্শ করে যে ইউজার ক্লিক করে কোথায় যাবে।
Hypertext reference হতে পারে Internal, Local, Global।
ইন্টারনাল: একই পেজের মধ্যে লিংক তৈরী হবে।
লোকাল: আপনার web site এর ভিতরে কোন পেজেরে সাথে লিংক তৈরী হবে।
গ্লোবাল: আপনার web site এর বাহিরে অন্য web site এর লিংক তৈরী হবে।
ইন্টারনাল- href=”#anchorname”
লোকাল- href=”/webcoachbd/./pics/picturefile.jpg”
গ্লোবাল- href=”http://www.tizag.com/”
এইচটিএমএল লিংক (টেক্সক্ট) যেভাবে তৈরী করবেন
<a> এবং </a> tag দ্বারা যথাত্রুমে লিংক শুরু এবং শেষ বোঝায়। href এট্রিবিউট এর সাহায্যে কোন ধরনের লিংক স্থাপিত হবে তা নির্ধারিত হয়। href এট্রিবিউটকে opening tag এর মধ্যে রাখতে হয়। opening এবং closing tag এর মধ্যে কোন লেখা থাকলে, তা পরে web পেজে লিংক হিসাবে দেখা যাবে। যেমন
1.<a href=”http://www.webcoachbd.com/” target=”_blank” >Webcoachbd Home</a>
2.<a href=”http://www.google.com/” target=”_blank” >Google Home</a>
3.
4.<a href=”http://www.yahoo.com/” target=”_blank” >Yahoo Home</a>
প্রদর্শন: গ্লোবাল লিংক
Webcoachbd Home Google Home Yahoo Home
এইচটিএমএল লিংক টার্গেট (HTML-link Target)
Target এট্রিবিউট দ্বারা বোঝায়, হয় পেজ খুলতে হবে পৃথক window তে অথবা লিংক খুলতে হবে একই browser window তে।
target=”
_blank”
নতুন browser window তে page খোলা।
_self”
current window তে page Load নেয়া।
_parent”
Loads new page into a frame that is superior to where the link lies
_top”
সব frames cancel করে, current browser window নতুন page Load নেয়া।
এইচটিএমএল ইমেইল লিংক
টেক্সট লিংক উপরে যেভাবে তৈরী করলেন ইমেইল লিংকও সেভাবে করতে হবে শুধু href এট্রিবিউটের ভিতর ইনভার্টেড কমার মধ্যে আগে ওয়েব সাইটের ঠিকানা ছিল আর এবার ইমেইল ঠিকানা দিবেন। যেমন
<a href= “mailto:[email protected]” >Email Example</a>
প্রদর্শন:
Email Example
এই লিংকের উপর মাউস নিয়ে যান, নিচে স্টাটাসবারে mailto:[email protected] লেখা দেখাবে। এখানে ক্লিক করলে
আপনার ব্রাউজার [email protected] নামের একটি মেইল ঠিকানায় মেইল পাঠানোর ক্ষেত্র প্রস্তুত করবে। আরও সহজভাবে বলি, ধরুন আপনি মজিলা ফায়ারফক্স ব্রাউজার ব্যবহার করছেন, আপনি যদি Tools>Options>Applications এ গিয়েmailto এর জায়গায় ড্রপডাউন মেনু থেকে Use Yahoo mail সিলেক্ট করে দেন তাহলে Email Example লিংকে ক্লিককরলে আপনার ইয়াহু মেইল খুলবে এবং To ফিল্ডের জায়গায় [email protected] লেখা উঠবে।
আপনি চাইলে ইমেইল লিংকে subject এবং body ঠিক করে দিতে পারেন যেমন
<a href= “mailto: [email protected]?subject=Web Page Email&body=This email is from your website” > 2nd Email Example</a> বাকিটুকু দেখুন.
আমি আইটি ব্লগ। বিশ্বের সর্ববৃহৎ বিজ্ঞান ও প্রযুক্তির সৌশল নেটওয়ার্ক - টেকটিউনস এ আমি 6 বছর 4 মাস যাবৎ যুক্ত আছি। টেকটিউনস আমি এ পর্যন্ত 24 টি টিউন ও 4 টি টিউমেন্ট করেছি। টেকটিউনসে আমার 5 ফলোয়ার আছে এবং আমি টেকটিউনসে 10 টিউনারকে ফলো করি।
