এইচটিএমএল ড্রপডাউন লিস্ট ( 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>

প্রদর্শন:

এইচটিএমএল আপলোড ( 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 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 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 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 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" />

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

এইচটিএমএল সুপারস্ক্রিপ্ট,সাবস্ক্রিপ্ট,স্ট্রাইকথ্রো

<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:
2³ = 8
14^x

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 tryst¹."

---

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

প্রদর্শন:

H₂O - Water
O₂ - Oxygen
CO₂ - 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

এইচটিএমএল কোড এবং 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!

এইচটিএমএল বোল্ড এবং ইটালিক (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 Language

or

HTML
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.

এইচটিএমএল ডিভ টিউটোরিয়াল ( HTML Div Tutorial in Bangla)

<div> ট্যাগ অন্যান্য ট্যাগ এর পাত্র হিসাবে কাজ করে অনেকটা body ট্যাগ এর মত।
Div এলিমেন্ট গুলো হলো block এলিমেন্ট যারা অন্তরালে থেকে অন্যান্য ট্যাগ গুলোকে একত্রে করে।
সিএসএস এর ক্ষেত্রে  Div এলিমেন্ট অনেক গুরুত্তপুর্ন।
নিচে ডিভে ব্যবহৃত কতকগুলো attributes দেয়া হলো।
id
width
height
title
style
দর্শকদের strong visualization এর জন্য ডিভের style attribute এর মাধ্যমে কালার প্রদর্শন করা যায়।

1.<body>

2.<div style="background: green">

3.<h5 >SEARCH LINKS</h5>

4.<a target="_blank" href="http://www.google.com">Google</a>

5.</div>

6.</body>

প্রদর্শন:
ডিভ কালার উদাহরন

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

টেবিল লেআউট অথবা ফ্রেম ছাড়াও ৩য় অল্টারনেটিভ হিসাবে 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 Body)

Body tag যা web page এর সকল element ধারন করে। Tables, Lists, Forms, paragraph element গুলোকে Body element এর মধ্যে রাখতে হয়।

HTML - Body Margins:

Attributes
Leftmargin: body element. এর বাম পাশের মারজিন।

topmargin :body element এর উপরের  মারজিন।

1.<body topmargin="50">

2.<body leftmargin="50">

প্রদর্শন:
Top Margin
Left Margin

HTML - Base Text:

Text attributes এর মাধ্যমে Body tag এর ভিতরের সকল টেক্সট এর কালার ঠিক করা যায়।

1.<body text="red" >

বা

1.<body text="rgb(255,0,0)" >

এইচটিএমএল ভিডিও টিউটোরিয়াল (HTML Video Tutorial in Bangla)

Music ফাইল এর মত ভিডিও ফাইল কে <embed /> ট্যাগ দিয়ে ওয়েব পেজ এ  প্রদর্শন করা যায়। image ট্যাগ এর মত embed ট্যাগ এর কোন closing ট্যাগ এর প্রয়োজন নেই। src attribute এর মাধ্যমে সঠিক URL(local বা global) ঠিক করে ভিডিও ওয়েব পেজে প্রদর্শন করা যায়।

1.<embed src="http://www.webcoachbd.com/files/html/htmlexample.mpeg"

2.autostart="false" />

প্রদর্শন:

আপনি href attribute এর মাধ্যমেও সঠিক URL ঠিক করে ভিডিও ওয়েব পেজে প্রদর্শন করা যায়।

1.<a href="http://www.webcoachbd.com/pics/flash/motiontween1easy.swf">

2.motiontween1easy.swf</a>

(রাইট বাটন ক্লিক করে play)

এইচটিএমএল -ভিডিওর ধরন

Flash movies (.swf), AVI's (.avi), and MOV's (.mov)। embed ট্যাগ এসব ফরমেটকে সাপোর্ট করে।
.swf files - এই ফরমেটটি হচ্ছে   ফ্লাশ
.wmv files – এই ফরমেটটি হচ্ছে  মাইক্রোসফট উইন্ডোজ মিডিয়া টাইপ।
.mov files - এই ফরমেটটি হচ্ছে   এপল কুইক টাইম মিডিয়া
.mpeg files – এটি একটি  standard ফরমেট যা  Moving Pictures Expert Group দ্বারা compression movie ফাইল তৈরী হয়েছে।
উপরের ফরমেট গুলোর মধ্যে ইন্টানেটে বেশি ব্যবহার হয় swf, mpeg এই ফরমেট গুলো ।

এইচটিএমএল - Embed Attributes:

Src attribute এর মত <embed /> ট্যাগ  এর আরো attribute  রয়েছে সেগুলো হলো volume, autostart, hidden, and loop ।

autostart - এই attribute এর  দুটি মান false বা true । যদি মান true দেয়া হয় তবে পেজ খোলার সাথে সাথে ভিডিও টি শুরু হয়ে যাবে।

hidden - এই attribute এর মাধ্যমে play/stop/pause নিয়ন্ত্রন করে। embedded object is hidden or not. Values are true or false. (Hide your embeded media if you just want background noise).

loop - এই attribute এর  দুটি মান false বা true। true সেট  করা থাকলে ভিডিও টি  রিপিট হবে আর false  থাকলে হবে না।.

playcount - Setting a playcount সেট করা অর্থ হচ্ছে mediaটি  x number পর্যন্ত  repeat হবে অবিরত হওয়ার repeat পরিবর্তে  (playcount="2" এর অর্থ video টি দুই বার চলবে).

volume - এই attribute দ্বারা media file এর volume set করা হয়। এর সীমা হল ০-১০০।

এইচটিএমএল ভিডিও টিউটোরিয়াল (HTML Video Tutorial in Bangla)

Music ফাইল এর মত ভিডিও ফাইল কে <embed /> ট্যাগ দিয়ে ওয়েব পেজ এ  প্রদর্শন করা যায়। image ট্যাগ এর মত embed ট্যাগ এর কোন closing ট্যাগ এর প্রয়োজন নেই। src attribute এর মাধ্যমে সঠিক URL(local বা global) ঠিক করে ভিডিও ওয়েব পেজে প্রদর্শন করা যায়।

1.<embed src="http://www.webcoachbd.com/files/html/htmlexample.mpeg"

2.autostart="false" />

প্রদর্শন:

আপনি href attribute এর মাধ্যমেও সঠিক URL ঠিক করে ভিডিও ওয়েব পেজে প্রদর্শন করা যায়।

1.<a href="http://www.webcoachbd.com/pics/flash/motiontween1easy.swf">

2.motiontween1easy.swf</a>

(রাইট বাটন ক্লিক করে play)

এইচটিএমএল -ভিডিওর ধরন

Flash movies (.swf), AVI's (.avi), and MOV's (.mov)। embed ট্যাগ এসব ফরমেটকে সাপোর্ট করে।
.swf files - এই ফরমেটটি হচ্ছে   ফ্লাশ
.wmv files – এই ফরমেটটি হচ্ছে  মাইক্রোসফট উইন্ডোজ মিডিয়া টাইপ।
.mov files - এই ফরমেটটি হচ্ছে   এপল কুইক টাইম মিডিয়া
.mpeg files – এটি একটি  standard ফরমেট যা  Moving Pictures Expert Group দ্বারা compression movie ফাইল তৈরী হয়েছে।
উপরের ফরমেট গুলোর মধ্যে ইন্টানেটে বেশি ব্যবহার হয় swf, mpeg এই ফরমেট গুলো ।

এইচটিএমএল - Embed Attributes:

Src attribute এর মত <embed /> ট্যাগ  এর আরো attribute  রয়েছে সেগুলো হলো volume, autostart, hidden, and loop ।

autostart - এই attribute এর  দুটি মান false বা true । যদি মান true দেয়া হয় তবে পেজ খোলার সাথে সাথে ভিডিও টি শুরু হয়ে যাবে।

hidden - এই attribute এর মাধ্যমে play/stop/pause নিয়ন্ত্রন করে। embedded object is hidden or not. Values are true or false. (Hide your embeded media if you just want background noise).

loop - এই attribute এর  দুটি মান false বা true। true সেট  করা থাকলে ভিডিও টি  রিপিট হবে আর false  থাকলে হবে না।.

playcount - Setting a playcount সেট করা অর্থ হচ্ছে mediaটি  x number পর্যন্ত  repeat হবে অবিরত হওয়ার repeat পরিবর্তে  (playcount="2" এর অর্থ video টি দুই বার চলবে).

volume - এই attribute দ্বারা media file এর volume set করা হয়। এর সীমা হল ০-১০০।

এইচটিএমএল মিউজিক টিউটোরিয়াল (HTML Embed Music Tutorial in Bangla)

ওয়েব পেজ এ music ঢুকানো অনেক সহজ। Embed ট্যাগ এর সাহায্যে music ঢুকানো হয় এবং src attribute এর সাহায্যে media file এর লোকেশন ঠিক করা হয়।

1.<embed src="/Madine Ko Jain.mp3" />

Embed Attributes – প্রদর্শনের সাথে সর্ম্পকিত:

Embeded media player এর বাহ্যিক রুপ কে কাস্টমাইজ করতে নিচের attribute কে সেট করতে হবে।
১. width - media player  এর প্রসস্থতা
২. height - media player এর উচ্চতা
৩. hidden – যদি এর মান সত্য হয় তবে media player টি প্রদর্শিত হবে না। আমি সুপারিশ করব এই attributeটি ব্যবহার করতে যদি আপনি জেনে থাকেন ওয়েব পেজ এ চলা music টি  ভিজিটর  বন্ধ করা option না চান।

1.<embed src="/last breath.mp3" width="360" height="165" />

Embed Attributes – কার্যপ্রণালী :

Embeded media player এর কার্যপ্রণালী কে কাস্টমাইজ করতে নিচের attribute কে সেট করতে হবে।
autostart – এই attribute এর  দুটি মান false বা true । যদি মান true দেয়া হয় তবে ওয়েব পেজ খোলার সাথে সাথে গান শুরু হবে।
loop - এই attribute এর  দুটি মান false বা true। true সেট  করা থাকলে গানটি  রিপিট হবে আর false  থাকলে হবে না।
volume - এই attribute দ্বারা media file এর volume সেট করা হয়। এর সীমা হল ০-১০০।

1.<embed src="/beethoven.mid" autostart="false" loop="false"

2.volume="60" />