পপুলার হোস্ট বিডি প্রোফেশনাল বাংলা ফ্রিল্যান্সিং ব্লগ ।। POPULAR HOST BD
এইচটিএমএল ক্রমিক লিস্ট (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
- Find a Job
- Get Money
- Move Out
- Find a Job
- Get Money
- Move Out
- Find a Job
- Get Money
- Move Out
- Find a Job
- Get Money
- Move Out
এইচটিএমএল বিনাক্রম লিস্ট (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
- Milk
- Toilet Paper
- Cereal
- Bread
আমরা type attributes ব্যবহার করে unordered list এর অন্যান্য বুলেট ব্যবহার করতে পারি।
<ul type=”square”>
<ul type=”dics”>
<ul type=”circle”>
type=”square”
type=”disc”
type=”circle”
- Milk
- Toilet Paper
- Cereal
- Bread
- Milk
- Toilet Paper
- Cereal
- Bread
- Milk
- Toilet Paper
- Cereal
- Bread
এইচটিএমএল ডেফিনেশন লিস্ট (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>
প্রদর্শন:
2nd Email Example
এখানে ক্লিক করলে আপনার ইয়াহু মেইল খুলবে এবং To এর জায়গায় [email protected] আর Subject এর জায়গায় Web Page Email ও Body তে This email from your site এগুলি গিয়ে অটোমেটিক বসবে।
ইন্টারনাল লিংক
নিচে লিংকগুলিতে ক্লিককরে দেখুন এই পেজেরই বিভিন্ন অংশে এই লিংকগুলি নিয়ে যাবে।এটা হচ্ছে ইন্টারনাল লিংক।পেজ বড় হলে সুচিপত্র তৈরী করে এভাবে লিংক দিতে পারেন।
“পেজের উপরে যান” এখানে ক্লিক করলে পেজের কোথায় যাবে তা আগেই ঠিক করে রাখতে হবে এভাবে
<h3>হাইপারটেক্সক্ট রেফারেন্স(href)<a name=”top”></a></h3>
পরের লিংকটিও এভাবে করে নিতে হবে (এখানে name=”text”)
শেষে “পেজের উপরে যান” এর উপর লিংক দিয়েছি এভাবে
<a href=”#top”>পেজের উপরে যান</a>
এবং
<a href=”#text”>টেক্সট লিংক</a>
এনটাইটি হল symbol এর কাল্পনিক বিষয়। অনেক symbol যেমন ট্রেডমার্ক, কপিরাইট, বৈদেশিক মুদ্রা প্রতিক ইত্যাদি ওয়েব পেজ প্রদর্শন করতে হলে এনটাইটি বিষয়ে জানতে হবে।
প্রত্যেক এনটাইটি এর তিনটি অংশ থাকে যেমন:
১.প্রত্যেক Entity এমপারসেন্ড (ampersand) দিয়ে শুরু হয়- &
২.তারপর Entity এর নাম – copy
৩.শেষে semicolon যোগ করতে হয়-;
কপিরাইট
©একত্রে লিখে তা তৈরী করে © – Copyright symbol.
অতিরিক্ত স্পেস
আমরা প্যারাগ্রাফ ট্যাগ এরং হেডিং ট্যাগ এর মধ্যে দেখেছি ব্রাউজার শুধু দুটি শব্দের মধ্যে একটি স্পেস চিনতে পারে এর বেশি পারে না। আমরা এনটাইটি ব্যবহার করে অতিরিক্ত স্পেস দিতে পারি। নিচে উদাহরন দেয়া হলো।
1.<p>Everything that goes up, must come down!</p>
প্রদর্শন:
Everything that goes up, must come down!
আমরা এইচটিএমএল এ লেস দেন এবং গ্রেটার দেন চিহ্ন ব্যবহার করে ট্যাগ তৈরী করি। এসব চিহ্ন ওয়েব পেজ এ দেখাতেচাইলে এনটাইটি ব্যবহার করতে হবে।
1.<p>
2.Less than – < <br />
3.Greater than – > <br />
4.Body tag – <body>
5.</p>
প্রদর্শন:
Less than – <
Greater than – >
Body tag – <body>
কমেন্ট আপনাকে ওয়েব ডেভেলপার হিসাবে এমন একটি পথ দেখাবে যেটা দ্বারা আপনি এটা নিয়ন্ত্রন করতে পারবেন যে কোন্ কোন্ লাইন ব্রাউজার দ্বারা নিস্ক্রিয় করা হবে।
তিনটি কারনে আমরা কোডকে ignore করি।
১. এইচটিএমএল ডকুমেন্ট এর ভিতরে note লিখে বা নিজের জন্য reminder লিখে
২.স্ক্রিপ্টিং ল্যাংগুয়েজ যেমন জাভাস্ক্রিপ্ট এর কিছু কমেন্ট বা মন্তব্য প্রয়োজন। .
৩.Temporarily comment প্রয়োজন যতক্ষন পর্যন্ত এইচটিএমএল এলিমেন্ট অসম্পুর্ন থাকে।
<!–Note to self: This is my banner image! Don’t forget –><img src=”http://www.webcoachbd.com/pics/ferdousSugar.jpg” height=”100″ width=”200″/>
অন্যান্য ট্যাগ মত কমেন্ট এরও opening tag এবং closing tag আছে।
<!– Opening Comment
— > Closing Comment
এইচটিএমএল – <!– এই লেখাটি কমেন্ট হয়ে থাকবে –>:
ওয়েব ডেভেলপার হিসাবে আপনি অনেক কাজ অসম্পুর্ন রাখতে পারেন সেক্ষেত্রে অসম্পুর্ন কাজটিকে <!— — > কমেন্ট ট্যাগ এর ভিতর রাখতে পারেন।
<!– <input type=”text”> size=”12″ /> — Input Field –>
যখন এইচটিএমএল ইলিমেন্টকে প্রদর্শন করতে চান তখন কমেন্ট ট্যাগটি উঠিয়ে দিবেন।
<input type=”text” size=”12″ />
প্রদর্শন: Input Field:
এইচটিএমএল ছবি টিউটোরিয়াল (HTML Images Tutorial in Bangla)
ছবি একটা গুরুত্বপুর্ন বিষয় এর সঠিক ব্যবহার আমাদের জানতে হবে। <img/> ট্যাগ ব্যবহার করে আমরা ওয়েব পেজ এ ইমেজ নিয়ে আসতে পারি।
view source
print?
1.<img src=”/sunset.gif” />
প্রদর্শন:
এইচটিএমএল-ছবি src:
Src attribute গুরুত্বপুর্ন বিষয়। Src এর অর্থ সোর্স(source) অর্থাৎ ইমেজের উৎস বা যেখানে picture file টি অবস্থিত।
দুটি উপায়ে আমরা ইমেজের সোর্স নির্দিস্ট করতে পারি।
১. Standard URL ব্যবহার করে
(src=http://www. webcoachbd.com/pics/htmlT/sunset.gif)
২. web server এ file কপি বা আপলোড করে
(src=”/../sunset.gif”)
এই picture file এর location এর সাথে .এইচটিএমএল file এর location এর সম্পর্ক আছে।
URL Types:
Local Src
Location Description
src=”/sunset.gif”
picture file এবং .html file একই directory তে অবস্থান বরে।
src=”/../sunset.gif”
picture file পুর্ববতি directory তে অবস্থান করে .html file মত।
src=”/../pics/sunset.gif”
pic directory এর picture file পুর্ববতি directory তে অবস্থান করে .html file এর মত।
এইচটিএমএল-alternative attribute:
Alt attribute নির্দিস্ট করে অলটারনেটিভ টেক্সট অর্থ্যাৎ যখন ইমেজ প্রদশির্ত হয় না তখন অলটারনেটিভ টেক্সটি প্রদশির্ত হয় । ইমেজ প্রদশির্ত না হওয়ার কারন হতে পারে ফাইলটি নষ্ট হয়ে গেছে বা browser ইমেজ ফাইলটি খুজে পাচ্ছে না।
view source
print?
1.<img src=”http://example.com/brokenlink/sunset.gif” alt=”Beautiful Sunset” />
প্রদর্শন:
এইচটিএমএল-ছবি height এবং width:
ইমেজের height এবং width ঠিক করার জন্য height এবং width attribute ব্যাবহার করা হয়।
view source
print?
1.<img src=”/sunset.gif” height=”50″ width=”100″>
প্রদর্শন:
এইচটিএমএল-Vertically এবং Horizontally align ছবি:
Align এবং valign attribute ব্যবহার ইমেজের অবস্থান নির্ধারন করতে পারি।
- align (Horizontal)
- right
- left
- center
- valign (Vertical)
- top
- bottom
- center
নিচে উদাহরন দেয়া হলো
1.<p>This is paragraph 1, yes it is…</p>
2.<p>
3.<img src=”/sunset.gif” align=”right”>
4.The image will appear along the…isn’t it?
5.</p>
6.<p>This is the third paragraph that appears…</p>
প্রদর্শন:
This is paragraph 1, yes it is. I think this paragraph serves as a nice example to show how this image alignment works. The image will appear along the right hand side of the paragraph. As you can see this is very nice for adding a little eye candy that relates to the specified paragraph. If we were talking about beautiful tropical sunsets, this picture would be perfect. But we aren’t talking about that, so it’s rather a waste, isn’t it? This is the third paragraph that appears below the paragraph with the image!
এইচটিএমএল-ইমেজকে লিংক হিসাবে ব্যবহার:
ইমেজকে লিংক হিসাবে ব্যবহার করা যায়।
1.<a href=”http://www.webcoachbd.com/“>
2.<img src=”/sunset.gif”>
3.</a>
প্রদর্শন:
এইচটিএমএল- Thumbnails:
Thumbnails হল ছোট সাইজের ইমেজ যা বড়, ভাল মানের ইমেজের সাথে লিংক করে। এই লিংক মাধ্যমে picture quality রক্ষা করা যায়।Thumbnails একটা নিম্ন মানের ইমেজ যা ইমেজ লিংক হিসাবে কাজ করে।
1.<a href=”/sunset.gif”>
2.<img src=”/thmb_sunset.gif”>
3.</a>
এইচটিএমএল টেবিল টিউটোরিয়াল (HTML Tables Tutorial in Bangla)
টেবিল হল Horizontal সারি এবং vertical কলামের বিন্যাস। এটা tabular data প্রদর্শনের ক্ষেত্রে অনেক গুরুত্বপুর্ন।ডকুমেন্টের এলিমেন্ট নিয়ন্ত্রনের জন্য ওয়েব ডিজাইনারদের কাছে এটা আরো বেশি গুরুত্বপুর্ন । সারি এবং কলামের ইন্টারসেকশনকে cell বলে। সকল এইচটিএমএল টেবিল <table> ট্যাগ দিয়ে শুরু হয় এবং </table> ট্যাগ দিয়ে শেষ হয়।
১.<tr> ট্যাগ Horizontal সারি নিদের্শ করে।
২ <td> ট্যাগ ঐ Horizontal সারির data cell নিদের্শ করে।
৩ <th> ট্যাগ data cell এর টেবিল heading হিসাবে কাজ করে।
৪ <tfoot> ট্যাগ টেবিলের footer যোগ করার জন্য ব্যবহার হয়।
1.<table border=”1″>
2.<tr><td>Row 1 Cell 1</td><td>Row 1 Cell 2</td></tr>
3.<tr><td>Row 2 Cell 1</td><td>Row 2 Cell 2</td></tr>
4.</table>
প্রদর্শন:
Row 1 Cell 1
Row 1 Cell 2
Row 2 Cell 1
Row 2 Cell 2
অনেকগুলো সারি এবং কলামের বিস্তার:
Rowspan ব্যাবহার করে অনেকগুলো সারির বিস্তার এবং colspan ব্যাবহার করে অনেকগুলো কলামের বিস্তার করা হয়।আপনি যদি কলামের header দিতে চান তাহলে <th> ট্যাগ ব্যাবহার করতে হবে। <th> ট্যাগ ব্যাবহার করলে defaultহিসাবে header টি বোল্ড আকারে দেখাবে।
01.<table border=”1″>
02.<tr>
03.<th>Column 1</th>
04.<th>Column 2</th>
05.<th>Column 3</th>
06.</tr>
07.<tr><td rowspan=”2″>Row 1 Cell 1</td>
08.<td>Row 1 Cell 2</td><td>Row 1 Cell 3</td></tr>
09.<tr><td>Row 2 Cell 2</td><td>Row 2 Cell 3</td></tr>
10.<tr><td colspan=”3″>Row 3 Cell 1</td></tr>
11.</table>
প্রদর্শন:
Row 1 Cell 1
Row 1 Cell 2
Row 2 Cell 1
Row 2 Cell 2
Cell padding এবং spacing
এখানে cellpadding বলতে বোঝায় টেবিলের বর্ডার এবং টেবিলের মধ্যে ধারনকৃত অংশ (লেখা, সংখ্যা) এর মধ্যে স্পেস (space) বা ফাকা অংশ এবং cellspacing বলতে বোঝায় টেবিলের দুটি cell এর মধ্যে স্পেস(space) বা ফাকা অংশ ।
01.<table border=”1″ cellspacing=”10″
02.bgcolor=”rgb(0,255,0)”>
03.<tr>
04.<th>Column 1</th>
05.<th>Column 2</th>
06.</tr>
07.<tr><td>Row 1 Cell 1</td><td>Row 1 Cell 2</td></tr>
08.<tr><td>Row 2 Cell 1</td><td>Row 2 Cell 2</td></tr>
09.</table>
প্রদর্শন:
Column 1
Column 2
Row 1 Cell 1
Row 1 Cell 2
Row 2 Cell 1
Row 2 Cell 2
1.<table border=”1″ cellpadding=”10″ bgcolor=”rgb(0,255,0)”>
2.<tr>
3.<th>Column 1</th>
4.<th>Column 2</th>
5.</tr>
6.<tr><td>Row 1 Cell 1</td><td>Row 1 Cell 2</td></tr>
7.<tr><td>Row 2 Cell 1</td><td>Row 2 Cell 2</td></tr>
8.</table>
প্রদর্শন:
Column 1
Column 2
Row 1 Cell 1
Row 1 Cell 2
Row 2 Cell 1
Row 2 Cell 2
