এইচটিএমএল (HTML) এর বিভিন্ন ট্যাগ ও এট্রিবিউট এর ব্যবহার পর্ব ০৩ – বাংলা টিটোরিয়াল

Posted by: POPULAR HOST BD April 13, 2019 in এইচটিএমএল

এইচটিএমএল ব্যাকগ্রাউন্ড রং টিউটোরিয়াল (HTML Background Colors Tutorial in Bangla)

bgcolor এট্রিবিউট টি বিশেষভাবে ওয়েব পেজ এবং টেবিলের ব্যাকগ্রাউন্ড নিয়ন্ত্রন করে। Bgcolor এট্রিবিউট টিকে অনেক এইচটিএমএল ট্যাগ এর মধ্যে ব্যাবহার করা যায় তবে সবচেয়ে ভাল হয় <body> এবং <table> ট্যাগ এর মধ্যে ব্যাবহার করলে। অতিরিক্ত হিসাবে ব্যাকগ্রাউন্ড স্টাইল করতে চাইলে সিএসএস ব্যাকগ্রাউন্ড(CSS টিউটোরিয়ালে আরোচনা করা হয়েছে) দেখতে পারেন।
গঠন:
<tagname bgcolor =”value”>
1.<body bgcolor=”Silver”>
2.<p>We set the background of this paragraph to be silver. The body tag is
3.where you change the pages background. Now continue the lesson to
4.learn more about adding background colors in your HTML!
5.</p>
6.</body>
প্রদর্শন:
We set the background of this paragraph to be silver. The body tag is where you change the pages background. Now continue the lesson to learn more about adding background colors in your HTML!
টেবিলের ব্যাকগ্রাউন্ড এ কালার যোগ করা :
01.<table bgcolor=”lime” border=”1″><tr>
02.<td>A lime colored table background using color names.</td>
03.</tr></table>
04.
05.
06.<table bgcolor=”#ff0000″ border=”1″><tr>
07.<td>A red colored table background using hexadecimal values “#FF0000″.</td>
08.</tr></table>
09.
10.
11.<table bgcolor=”rgb(0, 0, 255)” border=”1″><tr>
12.<td>A blue colored table background using RGB values “rgb(0, 0, 255)”.</td>
13.</tr></table>
প্রদর্শন:
A lime colored table background using color names.

A red colored table background using hexadecimal values “#FF0000”.

A blue colored table background using RGB values “rgb(0, 0, 255)”.
টেবিলের সারি এবং কলামে কালার যোগ করা:
1.<table>
2.<tr bgcolor=”#FFFF00″><td>This Row is Yellow!</td></tr>
3.<tr bgcolor=”#AAAAAA”><td>This Row is Gray!</td></tr>
4.<tr bgcolor=”#FFFF00″><td>This Row is Yellow!</td></tr>
5.<tr bgcolor=”#AAAAAA”><td>This Row is Gray!</td></tr>
6.<tr bgcolor=”#FFFF00″><td>This Row is Yellow!</td></tr>
7.<tr bgcolor=”#AAAAAA”><td>This Row is Gray!</td></tr>
8.</table>
প্রদর্শন:
This Row is Yellow!
This Row is Gray!
This Row is Yellow!
This Row is Gray!
This Row is Yellow!
This Row is Gray!
একত্রে ব্যাকগ্রাউন্ড color এবং font color:
1.<table bgcolor=”#000000″>
2.<tr><td bgcolor=”#009900″>
3.<font color=”#FFFF00″ align=”right”>Green Bay</font></td>
4.<td><font color=”#FFFFFF”>13</font></td></tr>
5.<tr><td bgcolor=”#0000FF”>
6.<font color=”#DDDDDD” align=”right”>New England</font></td>
7.<td><font color=”#FFFFFF”>27</font></td></tr>
8.</table>
প্রদর্শন:
Green Bay
13
New England
27

1.<table bgcolor=”#777777″>
2.<tr><td>
3.<p><font face=”Monotype Corsiva, Verdana” size=”4″ color=”#00FF00″>
4.This paragraph tag has…
5.</font></p>
6.</td></tr>
7.</table>
প্রদর্শন:
This paragraph tag has a gray background with green colored font. You should see Monotype Corsiva font if you have it installed, or Verdana as the backup. Both fonts are widely accepted as standard fonts.

এইচটিএমএল ব্যাকগ্রাউন্ড টিউটোরিয়াল (HTML Background Tutorial in Bangla)

ব্যাকগ্রাউন্ড এট্রিবিউট এর সাহায্যে এইচটিএমএল টেবিলে ইমেজকে ব্যাকগ্রাউন্ড ইমেজ হিসাবে দেখানো যায়।
1.<table height=”50″ width=”100″
2.background=”http://www.webcoachbd.com/images/stories/imagel.jpg” >
3.<tr><td>This table has a background image</td></tr>
4.</table>
প্রদর্শন:
This table has a background image
এইচটিএমএল ব্যাকগ্রাউন্ড রিপিট:
উপরের উদাহরনে দেখা গিয়েছে যে টেবিল এর আকার ছবির আকারের সমান বলে কোন সমস্যা হয় নি । যদি টেবিল এর আকার ছবির আকারের চেয়ে বড় হয় তবে ব্যাকগ্রাউন্ড ছবি রিপিট হবে।
1.<table height=”200″ width=”300″
2.background=”http://www.webcoachbd.com/images/stories/imagel.jpg” >
3.<tr><td>This table has a background image</td></tr>
4.</table>
প্রদর্শন:
This table has a background image
এইচটিএমএল প্যাটার্নড ব্যাকগ্রাউন্ড
বিভিন্ন ফটো এডিটিং সফ্টওয়ার দিয়ে বিভিন্ন প্যাটার্নের ব্যাকগ্রাউন্ড ছবি এরং ট্রান্সপারেন্ট ব্যাকগ্রাউন্ড ছবি তৈরী করাযায়। ট্রান্সপারেন্ট ইমেজের ফাইলটিকে gif ফরমেটে রাখতে হবে jpeg ফরমেটে নয়।
view source
print?
1.<table height=”100″ width=”150″
2.background=”http://www.tizag.com/pics/htmlT/pattern.jpg” >
3.<tr><td>This table has a background patterned image</td></tr>
4.</table>
প্রদর্শন:
This table has a background patterned image
view source
print?
1.<table background=”http://www.tizag.com/pics/htmlT/transparent.gif” >
2.<tr><td>This table has a red transparent background image</td></tr>
3.</table>
প্রদর্শন:
This table has a red transparent background image

এইচটিএমএল ফ্রেম টিউটোরিয়াল (HTML Frame)

ফ্রেম এর মাধ্যমে একই সময় একই ব্রাউজার উইন্ডো তে অনেক গুলো এইচটিএমএল ডকুমেন্ট প্রদর্শন করা যায়।
এইচটিএমএল-a generic frame page:
ফ্রেমের বেশি ব্যবহার হল একটি ফ্রেম এ মেনু আর একটি ফ্রেম এ তার কনটেন্ট ।যখন কেউ মেনু লিংকে ক্লিক করে তখন সেই ওয়েব পেজটি কনটেন্ট পেজে খোলে।
1.<html>
2.<head>
3.</head>
4.<frameset cols=”30%,*”>
5.<frame src=”/menu.html”>
6.<frame src=”/content.html”>
7.</frameset>
8.</html>
প্রদর্শন:
frameset – এটা একটা parent tag যা ফ্রেম page এর characteristics নির্দেশ করে।পৃথক পৃথক ফ্রেম frameset এর মধ্যে নির্দেশিত থাকে।
frameset cols=”#%, *”– Cols(column) যা ফ্রেম এর width নির্দেশ করে। উপরের উদাহরনে আমরা মেনু (1st column) নির্বাচন করেছি যা total page এর ৩০% এবং “*”, এর অর্থ total page এর ৭০% content(2nd column)নির্দেশিত হয়।
frame src=”/” ওয়েব পেজ এর লোকেশন ফ্রেমে লোড হয়।
ব্যনার বা টাইটেল যোগ করা:
1.<html><head></head>
2.<frameset rows=”20%,*”>
3.<frame src=”/title.html”>
4.<frameset cols=”30%,*”>
5.<frame src=”/menu.html”>
6.<frame src=”/content.html”>
7.</frameset>
8.</html>
frameset rows=”#%, *”-এর অর্থ frameset cols=”#%, *”– মতই।
FrameBorder and FrameSpacing:
FrameBorder এবং FrameSpacing attribute এর সাহায্যে ফ্রেম এর Spacing এবং দুটি ফ্রেমের মধ্যে ugly gray lines রিমুভ করা যায়।
1.<html><head></head>
2.<frameset border=”0″ frameborder=”0″ framespacing=”0″ rows=”20%,*”>
3.<frame src=”/title.html”>
4.<frameset border=”0″ frameborder=”0″ framespacing=”0″ cols=”30%,*”>
5.<frame src=”/menu.html”>
6.<frame src=”/content.html”>
7.</frameset>
8.</html>
প্রদর্শন:
Noresize and Scrolling:
Noresize attribute এর সংশ্লিষ্ট ফ্রেমকে আমরা রিসাইজ করতে পারি না।
scrolling=”(yes/no)”- ফ্রেম এর ভিতরে scroll হবে বা হবে না।
1.<html><head></head>
2.<frameset border=”2″ frameborder=”1″ framespacing=”2″ rows=”20%,*”>
3.<frame src=”/title.html” noresize scrolling=”no”>
4.<frameset border=”4″ frameborder=”1″ framespacing=”4″ cols=”30%,*”>
5.<frame src=”/menu.html” scrolling=”auto” noresize>
6.<frame src=”/content.html” scrolling=”yes” noresize>
7.</frameset>
8.</html>
অনুগ্রহ করে কোডগুলি নিজে লিখে প্রাকটিস করে দেখুন।

এইচটিএমএল লেআউট টিউটোরিয়াল (HTML Layout Tutorial in Bangla)

এইচটিএমএল লেআউট হল খুব মৌলিক বিষয়। টেবিলের ভিতর টেবিল স্থাপন করে এইচটিএমএল
লেআউট তৈরী করা হয়।
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>
প্রদর্শন: টেবিলের ভিতর টেবিল
Tables inside tables!
এইচটিএমএল স্টান্ডার্ড লেআউট
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>
প্রদর্শন:

এইচটিএমএল মিউজিক টিউটোরিয়াল (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″ />

এইচটিএমএল ভিডিও টিউটোরিয়াল (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 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 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 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

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 discussHTML 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!

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

1.<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 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>
প্রদর্শন:

Clean my room

এইচটিএমএল ফর্ম ( 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:[email protected]”> 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:[email protected]”> 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>
প্রদর্শন:ড্রপডাউন লিস্ট
Black White Maroon
উপরের উদাহরনে দেখুন 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 এট্রিবিউট
Black White Maroon
<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 এট্রিবিউট
Black White Maroon
*৭ নম্বর লাইনে যদি 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 Tutorial CSS Tutorials JavaScript Basic PHP Advanced PHP SQL Tutorial PHP Database