এইচটিএমএল ডিভ লেআউট

0
98
html
html

এইচটিএমএল ডিভ লেআউট

টেবিল লেআউট অথবা ফ্রেম ছাড়াও ৩য় অল্টারনেটিভ হিসাবে div এলিমেন্ট ব্যবহার করা যায়।

beginning and ending ট্যাগ এর মাধ্যমে div এলিমেন্ট সকল এইচটিএমএল এলিমেন্ট ধারন করতে পারে।

01.<div id="menu" align="left" >
02.<a href="/">HOME</a> |
03.<a href="/">CONTACT</a> |
04.<a href="/">ABOUT</a
05.</div>
06.<div id="content" align="left" bgcolor="white">
07.<h5>Content Articles</h5>
08.<p>This paragraph would be your content  paragraph with all of your readable material.</p>
09.</div>

প্রদর্শন:

এই্চটিএমএল ডিভ লেআউট

01.<div id="menu" align="right" >
02.<a href="/">HOME</a> |
03.<a href="/">CONTACT</a> |
04.<a href="/">ABOUT</a> |
05.<a href="/">LINKS</a>
06.</div>
07.<div id="content" align="right" >
08.<h5>Content Articles</h5>
09.<p>This paragraph would be your content
10.paragraph with all of your readable material.</p>
11.<h5 >Content Article Number Two</h5>
12.<p>Here's another content article right here.</p>
13.</div>
এইচটিএমএল বোল্ড এবং ইটালিক (HTML Bold & Italic)

<b> bold tag ব্যবহার করে আমরা টেক্স বোল্ড করতে পারি।

1.<b>This text is entirely BOLD!</b>

প্রদর্শন: Bold:

This text is entirely BOLD!

টেক্সকে  highlight করতে  bold tag ব্যবহার করতে পারি।.

1.<p><b>Don't</b> touch that!</p>

প্রদর্শন:

Don’t touch that!

dictionary fashion.লেখার জন্য আমরা bold tag ব্যবহার করতে পারি।

1.<p><b>Cardio:</b> Latin word meaning of the heart.</p>

প্রদর্শন: Dictionary

Cardio: Latin word meaning of the heart.

HTML – Italic(s)

The italics tag টি key word or phrase কে highlight করতে ব্যবহার করা উচিত। এই tags আপনার  font face কে stylize বা কোন আকৃতি দেবেনা বরং টেক্সটকে জোর দিবে। Emphasized tag প্রায়ই italics tag এর মত।

1.Italic <i>tag</i>!
2.<em>Emphasized</em> Text!
3.Create a <blockquote>blockquote</blockquote>!
4.Format your <address>addresses</address>!

প্রদর্শন: HTML Italics:

Italic tag!
Emphasized Text!
Create a blockquote!
Format your addresses!

1.<b>HTML</b>
2.<i>Hyper Text Markup Language</i>

বা

1.<b>HTML</b>
2.<em>Hyper Text Markup Language</em>

প্রদর্শন: HTML Dictionary

HTML
Hyper Text Markup LanguageorHTML
Hyper Text Markup Language

HTML Bold and Italics

<b> and the <i> tags উভয়কেই একসাথে text format এর জন্য ব্যবহার করা যায়।

শুধু তাদের ক্রম ঠিক থাকলো কিনা তা দেখে নিবেন।

1.<p>Phillip M. Rogerson <b><i>MD</i></b></p>

প্রদর্শন:

Phillip M. Rogerson MD

<b> and the <i> tags উভয়কেই টেক্স লিংকে ব্যবহার করলে ব্যাপার ভাল বুঝা যায়।

1.<p>Include several external
2.links throughout your texts as references to your viewers,
3.we will discuss
4.<a href="/" target="_blank" title="Tizag Links">
5.<b><i>HTML Links</i></b>
6.</a>
7.in a later lesson.</p>

প্রদর্শন: Format Links:

Include several external links throughout your texts as references to your viewers, we will discuss HTML links in a later lesson.
এইচটিএমএল কোড এবং pre ট্যাগ (HTML Code & Pre)

code tag এর মাধ্যমে আপনার text কে computer code এর মত করে লেখতে পারেন। এটা সাধারন ভাবে text এর  font face, size, এবং letter spacing পরিবর্তন করতে পারে।

1.This text has been formatted to be computer <code>code</code>!

প্রদর্শন: Computer Code

This text has been formatted to be computer code!

Use this tag to separate any computer code you wish to display on your website. It is not always necessary, but the tag exists if you so desire.

HTML – Code Links

পৃথক link হিসাবে আপনার web page এ দেখাতে পারেন।

1.<p>Feel free to search <a href="http://www.google.com" target="_blank">
2.<code>Google</code>
3.</a> for
4.anything you wish to find on the internet.</p>

প্রদর্শন: Code Links:

Feel free to search Google for anything you wish to find on the internet.

HTML – <pre> Preformatting

<pre> tag এর সুবিধা হল HTML coding এর সময় যেভাবে আমরা লাইন ব্রেক, স্পেস নির্দেশ করে দিবো ঠিক সেভাবে টেক্সট প্রদর্শিত হবে।অর্থ্যাৎ যেভাবে কোড লিখবেন সেভাবেই আউটপুট দেখাবে।

1.<pre>
2.Roses are Red,
3.এখানে কয়েকটা স্পেস আছেViolets are blue,
4.I may sound crazy,
5.এখানে কয়েকটা স্পেস আছেBut I love you!
6.</pre>

প্রদর্শন:

Roses are Red,
     Violets are blue,
I may sound crazy,
     But I love you!
এইচটিএমএল সুপারস্ক্রিপ্ট,সাবস্ক্রিপ্ট,স্ট্রাইকথ্রো
<p>This text is <sup>superscripted!</sup></p>প্রদর্শন: Superscript:This text is superscripted!

HTML – Exponents

অংকে exponential ব্যবহার করা জন্য <sup> tag ব্যবহার করতে হয়।

1.2<sup>3</sup> = 8
2.14<sup>x</sup>

প্রদর্শন: Exponents:

23 = 8
14x

HTML ফুটনোট:

উপন্যাস বা প্রবন্ধে দেখা যায় কোন লেখার reference দেয়ার জন্য <sup> tag ব্যবহার হয় যা ফুটনোটকে নির্দেশ করে।

1.<p>"It was a lover's tryst<sup>1</sup>."
2.<hr />
3.1. Secret meeting between lovers

প্রদর্শন: Footnote

“It was a lover’s tryst1.”


1. Secret meeting between lovers

HTML -Subscript

1.<p>This text is <sub>subscripted!</sub></p>

প্রদর্শন:

This text is subscripted!

1.<p>H<sub>2</sub>0 - Water
2.<p>O<sub>2</sub> - Oxygen
3.<p>CO<sub>2</sub> - Carbon Dioxide

প্রদর্শন:

H2O – Water
O2 – Oxygen
CO2 – Carbon Dioxide

HTML – Strikethrough

<del> tag এর মাধ্যমে কোন লেখাকে ক্রস দেওয়া যায়।

1.<p>This text is <del>scratched</del> out!</p>

প্রদর্শন: Strikethrough

This text is scratched out!

HTML – Check Off Task:

1.<ol>
2.<li>Clean my room</li>
3.<li><del>Cook Dinner</del></li>
4.<li><del>Wash Dishes</del></li>
5.</ol>

প্রদর্শন:

  1. Clean my room
  2. Cook Dinner
  3. Wash Dishes

এইচটিএমএল ফর্ম ( HTML Form)

ওয়েব সার্ভার হতে তথ্য(name, email address, credit card, ইত্যাদি) গ্রহনের ক্ষেত্রে ওয়েবমাস্টার এর জন্য ফর্ম গুরুত্বপুর্ন tool হিসাবে কাজ। আপনার চাহিদা অনুযায়ী ফর্ম দর্শক হতে ইনপুট গ্রহন করে। আপনি এখান থেকে ডেটা সঞ্চয় করতে পারেন , order করতে পারেন, ব্যাবহারকারীর পরিসংখ্যান জমা করতে পারেন,আপনার  forum এ ঐ ব্যক্তিটিকে রেজিস্ট্রেশন করাতে পারেন ইত্যাদি ।

টেক্সট ফিল্ড

কিভাবে সম্পুর্ন ফর্ম তৈরী করতে হয় সেটা আপনাদের আগে জানতে হবে। Input fields হচ্ছে form নামক sandwich এর গোশত । <input> tag এর কিছু attributes আছে সেসব সম্বন্ধে জানা উচিত ।

typeএই এট্রিবিউট ইনপুট ফিল্ড এর প্রকারভেদ নির্ধারন করে। যেমন text, submit, এবং password ।

nameএই এট্রিবিউট টি দিয়ে ফিল্ড এর নামকরন করা যায় যাতে পরবর্তিতে আপনি reference আনতে পারেন।

size এই এট্রিবিউট টি ফিল্ড এর horizontal width সেট করে ।

maxlength এই এট্রিবিউট টি character এর  সর্বোচ্চ নম্বর নির্ধারন করে

<form method=”post” action=”mailto:youremail@email.com”> Name: <input type=”text” size=”10″ maxlength=”40″ name=”name”> <br /> Password: <input type=”password” size=”10″ maxlength=”10″ name=”password”> </form>

প্রদর্শন: Input Forms

Name:
Password:

এইচটিএমএল- ইনপুট ট্যাগ:

Input fields এর মধ্যে যেসব জিনিস অন্তর্ভুক্ত সেগুলো হলো checkboxes, text fields, radios,  এবং form submission buttons। <input /> ট্যাগ এর কোন closing tag প্রয়োজন নেই।

এইচটিএমএল -Type Attribute:

Type attributes এর সাহায্যে এক প্রকারের input tag নির্দেশ করতে পারি।নিচে কতকগুলো input tag দেয়া হলো।

১. “text”

২. “password”

৩. “checkbox”

৪. “radio”

৫. “submit”

৬. “reset”

এইচটিএমএল – চেকবক্স:

চেকবক্স অনেকগুলি আইটেম থেকে একটা বাছাই করার সুবিধা দেয়। চেকবক্স এর  name এবং  value এট্রিবিউট যা রেডিও বাটন এর name এবং  value এট্রিবিউট মত আচরন করে।

<form method=”post” action=”mailto:youremail@email.com”> Select your favorite cartoon characters. <input type=”checkbox” name=”toon” value=”Goofy”>Goofy <input type=”checkbox” name=”toon” value=”Donald”>Donald <input type=”checkbox” name=”toon” value=”Bugs”>Bugs Bunny <input type=”checkbox” name=”toon” value=”Scoob”>Scooby Doo <input type=”submit” value=”Email Myself”> </form>

প্রদর্শন: চেকবক্স:

Select your favorite cartoon characters.Goofy
Donald
Bugs Bunny
Scooby Doo

এইচটিএমএল – সাবমিট বাটন:

Input type এর মধ্যে “submit”  অপশনটি সাবমিট বাটন তৈরীর ক্ষেত্রে উল্লেখযোগ্য ।specifies a very unique button. যখন আমরা submit button এ চাপ দেবো তখন ফর্ম এর বার্তাটি activate  হবে।

যেহেতু আমরা সাবমিট বাটন তৈরী করেছি তাই নতুন এট্রিবিউট প্রয়োজন তা হচ্ছে value এট্রিবিউট। আমরা যে শব্দকে value এট্রিবিউট এর মান হিসাবে নির্বাচন করবো তা বাটন উপর প্রদর্শিত হবে। “Submit” or “Continue” শব্দগুলো value এট্রিবিউট এর  মান হিসাবে ব্যবহার হয়।  .

1.<input type="submit" value="Submit" />
2.<input type="submit" value="Continue Please!" />

প্রদর্শন: সাবমিট বাটন

এইচটিএমএল – রিসেট বাটন:

সর্বশেষ input type হল রিসেট বাটন।  রিসেট বাটন ক্লিক করার মাধ্যমে আপনি ফর্ম এর সবকিছু আবার পুর্বের স্বাভাবিক অবস্থায় নিয়ে যেতে পারবেন।”start over” বাটন কে আপনি রিসেট বাটন এর মত ব্যাবহার করতে পারবেন।

1.<input type="reset" value="Reset Fields" />
2.<input type="reset" value="Start Over" />

প্রদর্শন: রিসেট বাটন:

এইচটিএমএল টেক্সক্ট ফিল্ড (HTML Text Field)

Text fields হল ছোট আয়তাক্ষেত্র যা আপনাকে কোন টেক্স ইনপুট করতে এবং সেই তথ্য  web server পাঠাতে সাহায্য করবে। এসব তথ্যগুলো scripting language যেমন (PHP, PERL, or ASP) এর মাধ্যমে প্রক্রিয়া হয়।

HTML – Text Field Size:

Size attribute এর মাধ্যমে text area এর size নিয়ন্ত্রন করা যায়। default size হল সাধারনত ২০ characters দির্ঘ্য।

1.<input type="text" size="5" />
2.<input type="text" size="15" />
3.<input type="text" size="25" />

প্রদর্শন: Text Fields:

HTML – Text Field Maxlength:

maxlength attribute নির্দিস্ট করা ছাড়া ব্যবহারকারী তার ইচ্ছামত characters ইনপুট করতে পারবে এমনকি আপনি যদি সাইজ নির্দিস্ট করেও থাকেন। characters ইনপুট কে সীমাবদ্ধ করতে maxlength attribute টি ব্যবহার করা হয়। size এবং maxlength একই হওয়া প্রয়োজন।

1.<input type="text" size="5" maxlength="5" />
2.<input type="text" size="15" maxlength="15" />
3.<input type="text" size="25" maxlength="25" />

প্রদর্শন: Maxlength Attribute

HTML – Text Field Value:

value attribute ব্যবহার করে আপনি আগে থেকেই টেক্সট ফিল্ডে কিছু লিখে রাখতে পারেন যেটা সকলে দেখতে পারবে।

1.<input type="text" size="5" maxlength="5" value="55555" />
2.<input type="text" size="15" maxlength="15" value="Corndog" />
3.<input type="text" size="25" maxlength="25" value="Tizag Tutorials!" />

Text Field Values:

এইচটিএমএল টেক্সক্ট এরিয়া (HTML Text Area)

টেক্সক্ট এরিয়া ব্লগ এর মত এটা ইউজার থেকে তথ্য তুলে আনতে ব্যবহৃত হয়। Paragraphs, essays, or memos সমূহ কাট পেষ্ট করে টেক্সক্ট এরিয়া তে বসানো যায় এবং সাবমিট করা যায়।টেক্সক্ট এরিয়া এর opening এবং closing ট্যাগ রয়েছে। টেক্সক্ট এরিয়া ট্যাগ এর ভিতর কোন কিছু লিখলে তা ওয়েব পেজ এর টেক্সক্ট এরিয়া তে প্রদর্শিত হয়।

1.<textarea>Text Area!</textarea>

প্রদর্শন

Text Area!

HTML – Text area Cols and Rows:

Adjust the of the text area র size এর  appearance কে ঠিক করতে হলে  দুটো attributes প্রয়োজন তা হলো cols androws। প্রতেক attribute এর জন্য সংখ্যাগত মান দিতে হরে। যত বড় মান হবে তত বড় text area হবে।

1.<textarea cols="20" rows="10">Text Area!</textarea>
2.<textarea cols="40" rows="2">Text Area!</textarea>
3.<textarea cols="45" rows="5">Text Area!</textarea>

প্রদর্শন:

Text Area!
Text Area!
Text Area!

HTML – Textarea Wrap:

wrap attribute টি টেক্সের কার্যকলাপ নির্ধারন করে যখন textarea র text field এ লেখা লিখতে লিখতে সারির শেষে চলে আসে। Wrap এর তিন ধরনের সেটিং আছে।যেমন:

১.soft

২.hard

৩.off

wrap attribute এর Softমানটি  wordকে  text areaর ভিতরে মুড়িয়ে ফেলে but form সাবমিট করা হয় তখন মুড়ানো wordটি দেখা যায় না (Line breaks অপশন যোগ হয় না )

wrap attribute এরHard মানটি  wordকে  text areaর ভিতরে মুড়িয়ে ফেলে এবং লাইন এর শেষে Line breaks অপশন যোগ হয় ।  তারপর form সাবমিট করলে দেখা যায় যেভাবে  text box এ লেখা ছিল ঠিক সেভাবে দেখাচ্ছে।

wrap attribute এরOff মানটি  wordকে  text areaর ভিতরে মুড়িয়ে ফেলে না এবং একটি লাইনে অনবরত চলতে থাকে।

1.<textarea cols="20" rows="5" wrap="hard">
2.As you can see many times word wrapping is often the desired
3.look for your textareas. Since it makes everything nice and
4.easy to read.
5.</textarea>

প্রদর্শন:Text Area Wrapping:

As you can see many times word wrapping
is often the desired look for your textareas. Since it makes everything
nice and easy to read.

1.<textarea cols="20" rows="5" wrap="off">
2.As you can see many times word wrapping is often the desired
3.look for your textareas. Since it makes everything nice and
4.easy to read.
5.</textarea>

প্রদর্শন: No Wrapping

As you can see many times word wrapping
is often the desired look for your textareas. Since it makes everything
nice and easy to read.

HTML – Textarea Readonly:

readonly attribute এর   value দুটি yes বা no। readonly attribute এর মান yes থাকলে আপনারা শুধু textarea এর টেক্সকে কপি করতে পারবেন কিন্তু পরিবর্তন করতে পারবেন না।

1.<textarea cols="20" rows="5" wrap="hard" readonly="yes">
2.As you can see many times word wrapping is often the desired
3.look for your text areas. Since it makes everything nice and
4.easy to read.
5.</textarea>

প্রদর্শন:

As you can see many
times word wrapping is often the desired look for your text areas. Since
it makes everything nice and easy to read.

HTML – Disabled

disabled attribute প্রয়োগের ফলে textarea র লেখা highlight হয় না, ধুসর রং ধারন করে এবং এর লেখাকে পরিবর্তন করতে পারি না।

1.<textarea cols="20" rows="5" wrap="hard" disabled="yes">
2.As you can see many times word wrapping is often the desired
3.look for your text areas. Since it makes everything nice and
4.easy to read.
5.</textarea>

প্রদর্শন:

As you can see many
times word wrapping is often the desired look for your text areas. Since
it makes everything nice and easy to read.

এইচটিএমএল রেডিও বোতাম (HTML Radio button)

Radios হল এক প্রকার ইনপুট ফর্ম যা ব্যবহারকারীকে যেকোন একটি অপশন সিলেক্ট করতে বলে। রেডিও বোতাম বা বাটন এর নাম ঠিকভাবে দিতে হবে।”multiple choice” এই ধরনের কুইজ এবং প্রশ্নের জন্য Radios ব্যবহার করা সবচেয়ে ভাল।

1.Italian: <input type="radio" name="food" />
2.Greek: <input type="radio" name="food" />
3.Chinese: <input type="radio" name="food" />

প্রদর্শন: Radios:

Italian:
Greek:
Chinese:

একই ফর্ম এ দুইটি ভিন্ন সেট রেডিওর আরও উদাহরন দেয়া হল।

1.Italian: <input type="radio" name="food" />
2.Greek: <input type="radio" name="food" />
3.Chinese: <input type="radio" name="food" />
4.
5.Male: <input type="radio" name="gender" />
6.Female: <input type="radio" name="gender" />

প্রদর্শন: Multiple Radios:

Italian:
Greek:
Chinese:

Male:
Female:

এইচটিএমএল- Radio Checked:

checked এট্রিবিউট,এর সাহায্যে আপনারা  radio তে অটোমেটিকালি ডিফল্ট  হিসাবে বৃত্তে আগে থেকে চেক দিয়ে রাখতে পারেন।

1.Italian: <input type="radio" name="food" checked="yes" />
2.Greek: <input type="radio" name="food" />
3.Chinese: <input type="radio" name="food" />

প্রদর্শন:Default Italian:

Italian:
Greek:
Chinese:

এইচটিএমএল আপলোড ( HTML Upload Form)

upload form ব্যবহার করে ইউজার pictures, movies, বা এমনকি নিজের webpages upload করতে পারে। একটা upload form হল এক ধরনের input form । আপনি সাধারনভাবে  type attribute দিয়ে এর মান হিসাবে  file লিখে upload form তৈরী করতে পারেন।

1.<input type="file"/>

প্রদর্শন: Upload Form

Max File Size

upload ফাইল এর size এর সীমানা বেধে দিয়ে আপনি আপনার webserver এর মূল্যবান space রক্ষা করতে পারেন। এর জন্য আমরা hidden input field  এবং আরও কিছু specific attributes যোগ করবো।

1.<input type="hidden" name="MAX_FILE_SIZE" value="500" />
2.<input type="file"/>

এখানে value 100 মানে  file সর্বোচ্চ 100kb হতে পারবে।

প্রদর্শন:

এইচটিএমএল ড্রপডাউন লিস্ট ( HTML Drop down list)

ড্রপডাউন লিস্ট এর মাধ্যমে আপনি ইউজারের জন্য এমন একটা তালিকা তৈরী করতে পারবেন যেখান থেকে ইউজার যেকোন একটা সিলেক্ট করে দিতে পারবে।ধরুন আপনাকে একটা ফর্ম তৈরী করতে বলা হল এবং এখানে একজনের প্রিয় রং কি সেটা যাতে সিলেক্ট করে দিতে পারে (অনেকগুলি রং এর মধ্যে) এমন একটি অপশন রাখতে হবে,তখন ড্রপডাউন লিস্টের মাধ্যমে সেটা সহজেই করতে পারেন।

ড্রপডাউন লিস্ট তৈরী করতে প্রথমে <select> ট্যাগ দিয়ে কোড শুরু করতে হবে এরপর যে আইটেমগুলি থেকে ইউজার বাছাই করবে সেগুলির প্রতিটি <option> ট্যাগের মধ্যে রাখতে হবে।যেমন

1.<select name="color">
2.<option  value="bl">Black</option>
3.<option value="wh">White</option>
4.<option selected="selected" value="mr">Maroon</option>
5.</select>

প্রদর্শন:ড্রপডাউন লিস্ট

উপরের উদাহরনে দেখুন selected এট্রিবিউটের কারনে প্রথম অপশন Maroon দেখাচ্ছে আপনি যদি চান White প্রথমে দেখাক তাহলে ৩ নম্বর লাইনে selected এট্রিবিউট ব্যবহার করবেন।

প্রতিটি <option> ট্যাগে value এট্রিবিউট আছে এটা খুব গুরত্বপূর্ন যখন ফর্মের ডেটা সার্ভারে পাঠাবেন।value এট্রিবিউটের নাম ধরে (যেমন bl,mr..) কল করতে হয়।

<select> ট্যাগের size এট্রিবিউট

<select> ট্যাগে size এট্রিবিউট দিয়ে আপনি ঠিক করে দিতে পারেন যে লিস্টে কয়টি আইটেম দেখাবে যেমন উপরের উদাহরনেই যদি size=2 দেন তাহলে দুটি অপশন দেখাবে বাকিটা স্ক্রল করে দেখতে হবে।

01.<select name="color" size=2>
02.
03.<option value="bl">Black</option>
04.
05.<option value="wh">White</option>
06.
07.<option selected="selected" value="mr">Maroon</option>
08.
09.</select>

প্রদর্শন: <select> ট্যাগের size এট্রিবিউট

<select> ট্যাগের multiple এট্রিবিউট

multiple এর মাধ্যমে আপনি একের অধিক বিষয়  সিলেক্ট করার সুযোগ দিতে পারেন।

01.<select multiple="yes">
02.
03.<option value="bl">Black</option>
04.
05.<option value="wh">White</option>
06.
07.<option selected="selected" value="mr">Maroon</option>
08.
09.</select>

প্রদর্শন: <select> ট্যাগের multiple এট্রিবিউট

*৭ নম্বর লাইনে যদি selected এট্রিবিউট উঠিয়ে দেন তাহলে কোন অপশন আর সিলেক্টেড দেখাবেনা।

আপনার অপশন লিস্ট যদি অনেক বড় হয় তাহলে গ্রুপ করতে পারেন।<optgroup> এলিমেন্ট দিয়ে এটা করা যায়। যেমন

01.<select name="selInformation" >
02.<optgroup label="Tutorials" >
03.<option value="html"> HTML Tutorial </option>
04.<option value="css"> CSS Tutorials </option>
05.<option value="javascript"> JavaScript </option>
06.</optgroup>
07.<optgroup label="PHP Tutorials" >
08.<option value="basicphp"> Basic PHP </option>
09.<option value="advancedphp"> Advanced PHP </option>
10.</optgroup >
11.<optgroup label="Database Tutorials">
12.<option value="sql"> SQL Tutorial </option>
13.<option value="phpdatabase"> PHP Database </option>
14.</optgroup>
15.</select>

প্রদর্শন:

ড্রপডাউন লিস্ট এর মাধ্যমে আপনি ইউজারের জন্য এমন একটা তালিকা তৈরী করতে পারবেন যেখান থেকে ইউজার যেকোন একটা সিলেক্ট করে দিতে পারবে।ধরুন আপনাকে একটা ফর্ম তৈরী করতে বলা হল এবং এখানে একজনের প্রিয় রং কি সেটা যাতে সিলেক্ট করে দিতে পারে (অনেকগুলি রং এর মধ্যে) এমন একটি অপশন রাখতে হবে,তখন ড্রপডাউন লিস্টের মাধ্যমে সেটা সহজেই করতে পারেন।

ড্রপডাউন লিস্ট তৈরী করতে প্রথমে <select> ট্যাগ দিয়ে কোড শুরু করতে হবে এরপর যে আইটেমগুলি থেকে ইউজার বাছাই করবে সেগুলির প্রতিটি <option> ট্যাগের মধ্যে রাখতে হবে।যেমন

1.<select name="color">
2.<option  value="bl">Black</option>
3.<option value="wh">White</option>
4.<option selected="selected" value="mr">Maroon</option>
5.</select>

প্রদর্শন:ড্রপডাউন লিস্ট

উপরের উদাহরনে দেখুন selected এট্রিবিউটের কারনে প্রথম অপশন Maroon দেখাচ্ছে আপনি যদি চান White প্রথমে দেখাক তাহলে ৩ নম্বর লাইনে selected এট্রিবিউট ব্যবহার করবেন।

প্রতিটি <option> ট্যাগে value এট্রিবিউট আছে এটা খুব গুরত্বপূর্ন যখন ফর্মের ডেটা সার্ভারে পাঠাবেন।value এট্রিবিউটের নাম ধরে (যেমন bl,mr..) কল করতে হয়।

<select> ট্যাগের size এট্রিবিউট

<select> ট্যাগে size এট্রিবিউট দিয়ে আপনি ঠিক করে দিতে পারেন যে লিস্টে কয়টি আইটেম দেখাবে যেমন উপরের উদাহরনেই যদি size=2 দেন তাহলে দুটি অপশন দেখাবে বাকিটা স্ক্রল করে দেখতে হবে।

01.<select name="color" size=2>
02.
03.<option value="bl">Black</option>
04.
05.<option value="wh">White</option>
06.
07.<option selected="selected" value="mr">Maroon</option>
08.
09.</select>

প্রদর্শন: <select> ট্যাগের size এট্রিবিউট

<select> ট্যাগের multiple এট্রিবিউট

multiple এর মাধ্যমে আপনি একের অধিক বিষয়  সিলেক্ট করার সুযোগ দিতে পারেন।

01.<select multiple="yes">
02.
03.<option value="bl">Black</option>
04.
05.<option value="wh">White</option>
06.
07.<option selected="selected" value="mr">Maroon</option>
08.
09.</select>

প্রদর্শন: <select> ট্যাগের multiple এট্রিবিউট

*৭ নম্বর লাইনে যদি selected এট্রিবিউট উঠিয়ে দেন তাহলে কোন অপশন আর সিলেক্টেড দেখাবেনা।

আপনার অপশন লিস্ট যদি অনেক বড় হয় তাহলে গ্রুপ করতে পারেন।<optgroup> এলিমেন্ট দিয়ে এটা করা যায়। যেমন

01.<select name="selInformation" >
02.<optgroup label="Tutorials" >
03.<option value="html"> HTML Tutorial </option>
04.<option value="css"> CSS Tutorials </option>
05.<option value="javascript"> JavaScript </option>
06.</optgroup>
07.<optgroup label="PHP Tutorials" >
08.<option value="basicphp"> Basic PHP </option>
09.<option value="advancedphp"> Advanced PHP </option>
10.</optgroup >
11.<optgroup label="Database Tutorials">
12.<option value="sql"> SQL Tutorial </option>
13.<option value="phpdatabase"> PHP Database </option>
14.</optgroup>
15.</select>

প্রদর্শন:

Genericattributes:

Attribute দিয়ে ওয়েবপেজ কে সম্পুর্নভাবে কাস্টমাইজ করা যায়। নিচে টেবিলে কিছু এইট্রবিউট দেয়া হল যা অনেক HTML Tag এর সাথে সহজে ব্যবহার করা যায়।

Attribute Options Function
align right, left, center সমান্তাল (Horizontally) aligns tags
valign top, middle, bottom উলম্ব(Vertically) aligns tags
bgcolor numeric, hexadecimal, RGB values Element এর  background color নিদের্শ করে।
background URL Background image উপর element নিদের্শ করে।
id ব্যবহারকারীর নির্দেশ অনুযায়ী Element  এর Name যা Cascading Style Sheets (css)   সাথে ব্যবহার করা হয়।
class ব্যবহারকারীর নির্দেশ অনুযায়ী Element  এর শ্রেনীবিন্যাস  যা Cascading Style Sheets (css) সাথে ব্যবহার করা হয়।
width Numeric Value Tables, images, or table cells এর width নির্দেশ  করে ।
height Numeric Value Tables, images, or table cells এর height  নির্দেশ  করে ।
title ব্যবহারকারীর নির্দেশ অনুযায়ী আপনার elements এর “Pop-up” title ।

LEAVE A REPLY

Please enter your comment!
Please enter your name here