এইচটিএমএল (HTML) টিউটোরিয়াল
HTML এর রুপ
HTML এর সকল Tag সমূহ।
<html> </html> HTML ডকুমেন্ট নির্দেশ করে।
<head></head> প্রোগ্রামের head অংশ নির্দেশ করে ।
<title></title> ডকুমেন্ট টাইটেল নির্দেশ করে।
<body></body> প্রোগ্রামের মূল content অংশ নির্দেশ করে।
<p></p> প্যারাগ্রাফ নির্দেশ করে।
<h1></h1> হেডার ট্যাগ 1-6 পর্যন্ত হয়।
<h1></h1> হেডার ট্যাগ 1-6 পর্যন্ত হয়।
<b></b> Bold টেক্সট নির্দেশ করে।
<big></big> স্বাভাবিকের চেয়ে বড় টেক্সট নির্দেশ করে।
<strong></strong> Strong টেক্সট নির্দেশ করে।
<small></small> স্বাভাবিকের চেয়ে ছোট টেক্সট নির্দেশ করে।
<i></i> Italic টেক্সট নির্দেশ করে।
<u></u> Underline টেক্সট নির্দেশ করে।
<sub></sub> subscripted text নির্দেশ করে।
<sup></sup> superscripted text নির্দেশ করে।
<del></del> ট্যাগ দ্বারা কোনো লেখাকে delete বা remove করা যায়।
<ins></ins> Underline বা নিম্নরেখাযুক্ত অক্ষর প্রদর্শন করার জন্য এই ট্যাগটি ব্যবহার হয় ।
<br / > একটা লাইন ব্রেক তৈরি করে ।
<hr/> সমান্তরাল রেখা তৈরি করে।
<ol></ol> অর্ডার লিষ্ট তৈরিতে ব্যবহৃত হয়।
<ul></ul> আনঅর্ডার লিষ্ট তৈরিতে ব্যবহৃত হয়।
<li></li> লিষ্ট তৈরিতে ব্যবহৃত হয়।
<a></a> Anchor ট্যাগ।
<table></table> টেবিল তৈরিতে ব্যবহৃত হয়।
<col></col> বিলের কলাম তৈরিতে ব্যবহৃত হয়।
<td></td> টেবিলের সেল তৈরিতে ব্যবহৃত হয়।
<tr></tr> টেবিলের সারি তৈরিতে ব্যবহৃত হয়।
<form></form> ফরম তৈরিতে ব্যবহৃত হয়।
<input></input> ফরমের ইনপুট ফিল্ড তৈরিতে ব্যবহৃত হয়।
<img/> ছবি যুক্ত করতে ব্যবহৃত হয়।
<meta></meta> Meta ট্যাগ
<pre></pre> pre-formatted টেক্সট তৈরিতে ব্যবহৃত হয়।
<tt></tt> টেলিটাইপ টেক্সট নির্দেশ করে।
<code></code> কম্পিউটার কোড টেক্সট প্রকাশ করে।
<cite></cite> ভিন্ন ভাবে text প্রদর্শনের ব্যবহৃত হয়।
<bdo></bdo> টেক্সটকে উল্টিয়ে প্রদর্শনের ব্যবহৃত হয়।
<area></area> কোন ইমেজের মধ্যে বিভিন্ন অংশ ক্লিকের মাধ্যমে প্রদর্শনের জন্য ব্যবহৃত হয়।
<abbr></abbr> abbreviation টেগ ধারা টেক্সটকে সংক্ষেপে প্রদর্শনের জন্য।
<!--text--></!--text--> কোন টেক্সটকে কমেন্ট হিসেবে দেখানোর জন্য ব্যবহৃত হয়।
<blockquote> </blockquote> বিশেষ উদ্ধৃতি প্রকাশ করতে ব্যবহৃত হয়।
<bdo></bdo> টেক্সটকে উল্টিয়ে প্রদর্শনের ব্যবহৃত হয়।
<area></area> কোন ইমেজের মধ্যে বিভিন্ন অংশ ক্লিকের মাধ্যমে প্রদর্শনের জন্য ব্যবহৃত হয়।
<abbr></abbr> abbreviation টেগ ধারা টেক্সটকে সংক্ষেপে প্রদর্শনের জন্য।
<button></button> টেক্সট এ বাটনযুক্ত করার জন্য ব্যবহৃত হয়।
<audio></audio> টেক্সট এ অডিও যুক্ত করার জন্য ব্যবহৃত হয়।
<address></address> কন্টাক্ট ইনফরমেশনের প্রদর্শনের জন্য ব্যবহৃত হয়।
<!doctype></!doctype> HTML এ ডকোমেন্টের ধরণ নির্ধারণ করার জন্য ব্যবহৃত হয়।<!--text--></!--text--> কোন টেক্সটকে কমেন্ট হিসেবে দেখানোর জন্য ব্যবহৃত হয়।
<blockquote> </blockquote> বিশেষ উদ্ধৃতি প্রকাশ করতে ব্যবহৃত হয়।
===================================================================================
<html>
<head>
<head>
<title>this is my wabpage</title>
</head>
<body>
<h1>this is title</h1>
<h2>this is title</h2>
<h3>this is title</h3>
<h4>this is title</h4>
<h5>this is title</h5>
<h6>this is title</h6>
<p>this is my simple</p>
===================================================================================
HTML Paragraph
পেরাগ্রাফ লিখতে হলে যেভাবে উপরের টেগ গুলো ব্যবহার করতে হয়।
<p>i am student of JKL institute.</p><p>i am <strong>student</strong> of JKL institute.</p>
<p>i am <b>student</b> of JKL institute.</p>
<p>i am <i>student</i> of JKL institute.</p>
<p>i am <em>student</em> of JKL institute.</p>
<p>i am <u>student</u> of JKL institute.</p>
<p>i am <small>student</small> of JKL institute.</p>
<p>i am student<sup>1</sup> of JKL institute.</p>
<p>i am student<sub>2</sub> of JKL institute.</p>
<p>i am <blockquote>student</blockquote> of JKL institute.</p>
<p>i am student of JKL institute.</p>
<p>i am student of JKL institute.</p>
old rate <del>$20</del> new rate $10
<br/>
old rate<ins>$20</ins>new rate $10 ফলাফল>>
বাকি টেগ গুলোও এইভাবে ব্যবহার করতে হবে।
===================================================================================
Form
<form>
Name:<input type="name" first name="name"/></br>
Password:<input type="password"/></br>
E-mail:<input type="text" name="e-mail"/></br>
Mobile Number:<input type="number"/></br>
i agree<input type="radio"/><br/>
i agree<input type="checkbox"/><br/>
<input type="file"/></br>
<input type="reset"/></br>
Message:<textarea></textarea></br>
<input type="submit" name="submit" value="Submt"/></br></br></br>
Search<input type="search"/>
</form> ফলাফল>>
Name:<input type="name" first name="name"/></br>
Password:<input type="password"/></br>
E-mail:<input type="text" name="e-mail"/></br>
Mobile Number:<input type="number"/></br>
i agree<input type="radio"/><br/>
i agree<input type="checkbox"/><br/>
<input type="file"/></br>
<input type="reset"/></br>
Message:<textarea></textarea></br>
<input type="submit" name="submit" value="Submt"/></br></br></br>
Search<input type="search"/>
</form> ফলাফল>>
===================================================================================
Select
ড্রপডাউন লিস্ট তৈরী করতে প্রথমে select ট্যাগ দিয়ে কোড শুরু করতে হবে এরপর যে আইটেমগুলি থেকে ইউজার বাছাই করবে
সেগুলির প্রতিটি option ট্যাগের মধ্যে রাখতে হবে। যেমন
<select>
<option>BDT</option>
<option>INR</option>
<option>EUR</option>
<option>USD</option>
<option>AUD</option>
<option>NZD</option>
<option>CAD</option>
<option>JPY</option>
</select>
Select ট্যাগের size এট্রিবিউট select ট্যাগে size এট্রিবিউট দিয়ে আপনি ঠিক করে দিতে পারেন যে
লিস্টে কয়টি আইটেম দেখাবে যেমন উপরের উদাহরনেই যদি size=2 দেন তাহলে দুটি অপশন দেখাবে বাকিটা স্ক্রল করে দেখতে হবে।
<select name="color" size=2>
<option>BDT</option>
<option>INR</option>
<option>EUR</option>
<option>USD</option>
<option>AUD</option>
<option>NZD</option>
<option>CAD</option>
<option>JPY</option>
</select>
Select ট্যাগের multiple এট্রিবিউট এর মাধ্যমে আপনি একের অধিক বিষয় সিলেক্ট করার সুযোগ দিতে পারেন।
<select multiple="yes">
<option>BDT</option>
<option>INR</option>
<option>EUR</option>
<option>USD</option>
<option>AUD</option>
<option>NZD</option>
<option>CAD</option>
<option>JPY</option>
</select>
অপশন লিস্ট যদি অনেক বড় হয় তাহলে গ্রুপ করতে পারেন। optgroup এলিমেন্ট দিয়ে এটা করা যায়। যেমন
<select name="selInformation" >
<optgroup label="Tutorials" >
<option value="html"> HTML Tutorial </option>
<option value="css"> CSS Tutorials </option>
<option value="javascript"> JavaScript </option>
</optgroup>
<optgroup label="PHP Tutorials" >
<option value="basicphp"> Basic PHP </option>
<option value="advancedphp"> Advanced PHP </option>
</optgroup >
<optgroup label="Database Tutorials">
<option value="sql"> SQL Tutorial </option>
<option value="phpdatabase"> PHP Database </option>
</optgroup>
</select> ফলাফল>>
সেগুলির প্রতিটি option ট্যাগের মধ্যে রাখতে হবে। যেমন
<select>
<option>BDT</option>
<option>INR</option>
<option>EUR</option>
<option>USD</option>
<option>AUD</option>
<option>NZD</option>
<option>CAD</option>
<option>JPY</option>
</select>
Select ট্যাগের size এট্রিবিউট select ট্যাগে size এট্রিবিউট দিয়ে আপনি ঠিক করে দিতে পারেন যে
লিস্টে কয়টি আইটেম দেখাবে যেমন উপরের উদাহরনেই যদি size=2 দেন তাহলে দুটি অপশন দেখাবে বাকিটা স্ক্রল করে দেখতে হবে।
<select name="color" size=2>
<option>BDT</option>
<option>INR</option>
<option>EUR</option>
<option>USD</option>
<option>AUD</option>
<option>NZD</option>
<option>CAD</option>
<option>JPY</option>
</select>
Select ট্যাগের multiple এট্রিবিউট এর মাধ্যমে আপনি একের অধিক বিষয় সিলেক্ট করার সুযোগ দিতে পারেন।
<select multiple="yes">
<option>BDT</option>
<option>INR</option>
<option>EUR</option>
<option>USD</option>
<option>AUD</option>
<option>NZD</option>
<option>CAD</option>
<option>JPY</option>
</select>
অপশন লিস্ট যদি অনেক বড় হয় তাহলে গ্রুপ করতে পারেন। optgroup এলিমেন্ট দিয়ে এটা করা যায়। যেমন
<select name="selInformation" >
<optgroup label="Tutorials" >
<option value="html"> HTML Tutorial </option>
<option value="css"> CSS Tutorials </option>
<option value="javascript"> JavaScript </option>
</optgroup>
<optgroup label="PHP Tutorials" >
<option value="basicphp"> Basic PHP </option>
<option value="advancedphp"> Advanced PHP </option>
</optgroup >
<optgroup label="Database Tutorials">
<option value="sql"> SQL Tutorial </option>
<option value="phpdatabase"> PHP Database </option>
</optgroup>
</select> ফলাফল>>
===================================================================================
Table
<table>
<tr>
<th>Markup</th>
<th>Programming</th>
<th>Database</th>
</tr>
<tr>
<td>HTML</td>
<td>JS</td>
<td>SQL</td>
</tr>
<tr>
<td>CSS</td>
<td>PHP</td>
<td>MySQL</td>
</tr>
</table>
</table></br>
Table2
<table border="1" cellpadding="10">
<thead>
<tr>
<th>Markup</th>
<th>Programming</th>
<th>Database</th>
</tr>
</thead>
<tfoot>
<tr>
<td>Easy</td>
<td>Tough</td>
<td>Tough</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>HTML</td>
<td>JS</td>
<td>SQL</td>
</tr>
<tr>
<td>CSS</td>
<td>PHP</td>
<td>MySQL</td>
</tr>
</tbody>
</table><br/>
Table3
<table border="1">
<tr>
<th rowspan="2">Web Language</th>
<td>HTML</td>
<td>CSS</td>
</tr>
<tr>
<td>PHP</td>
<td>JS</td>
</tr>
<tr>
<th>Framework</th>
<td>CI</td>
<td>Bootstrap</td>
</tr>
</table></br>
Table4
<table border="1">
<tr>
<th rowspan="2">Web Language</th>
<td>HTML</td>
<td>CSS</td>
</tr>
<tr>
<td>PHP</td>
<td>JS</td>
</tr>
<tr>
<th>Framework</th>
<td colspan="2"></td></tr>
</table>
<table border="1px" widht="250px" height="250px">
<tr>
<td>one colum</td>
<td>one colum</td>
</tr>
<table> ফলাফল>>
<tr>
<th>Markup</th>
<th>Programming</th>
<th>Database</th>
</tr>
<tr>
<td>HTML</td>
<td>JS</td>
<td>SQL</td>
</tr>
<tr>
<td>CSS</td>
<td>PHP</td>
<td>MySQL</td>
</tr>
</table>
</table></br>
Table2
<table border="1" cellpadding="10">
<thead>
<tr>
<th>Markup</th>
<th>Programming</th>
<th>Database</th>
</tr>
</thead>
<tfoot>
<tr>
<td>Easy</td>
<td>Tough</td>
<td>Tough</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>HTML</td>
<td>JS</td>
<td>SQL</td>
</tr>
<tr>
<td>CSS</td>
<td>PHP</td>
<td>MySQL</td>
</tr>
</tbody>
</table><br/>
Table3
<table border="1">
<tr>
<th rowspan="2">Web Language</th>
<td>HTML</td>
<td>CSS</td>
</tr>
<tr>
<td>PHP</td>
<td>JS</td>
</tr>
<tr>
<th>Framework</th>
<td>CI</td>
<td>Bootstrap</td>
</tr>
</table></br>
Table4
<table border="1">
<tr>
<th rowspan="2">Web Language</th>
<td>HTML</td>
<td>CSS</td>
</tr>
<tr>
<td>PHP</td>
<td>JS</td>
</tr>
<tr>
<th>Framework</th>
<td colspan="2"></td></tr>
</table>
<table border="1px" widht="250px" height="250px">
<tr>
<td>one colum</td>
<td>one colum</td>
</tr>
<table> ফলাফল>>
===================================================================================
Color
<body bgcolor="Silver">
<p>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!</p>
</body></br>
<table bgcolor="lime" border="1"><tr>
<td>A lime colored table background using color names.</td>
</tr></table></br>
<table bgcolor="#ff0000" border="1"><tr>
<td>A red colored table background using hexadecimal values "#FF0000".</td>
</tr></table></br>
<table bgcolor="rgb(0, 0, 255)" border="1" style="color: red;"><tr>
<td>A blue colored table background using RGB values "rgb(0, 0, 255)".</td>
</tr></table></br>
<table>
<tr bgcolor="#FFFF00"><td>This Row is Yellow!</td></tr>
<tr bgcolor="#AAAAAA"><td>This Row is Gray!</td></tr>
<tr bgcolor="#FFFF00"><td>This Row is Yellow!</td></tr>
<tr bgcolor="#AAAAAA"><td>This Row is Gray!</td></tr>
<tr bgcolor="#FFFF00"><td>This Row is Yellow!</td></tr>
<tr bgcolor="#AAAAAA"><td>This Row is Gray!</td></tr>
</table></br>
<table bgcolor="#000000">
<tr><td bgcolor="#009900">
<font color="#FFFF00" align="right">Green Bay</font></td>
<td><font color="#FFFFFF">13</font></td></tr>
<tr><td bgcolor="#0000FF">
<font color="#DDDDDD" align="right">New England</font></td>
<td><font color="#FFFFFF">27</font></td></tr>
</table></br>
<table bgcolor="#777777">
<tr><td>
<p><font face="Monotype Corsiva, Verdana" size="4" color="#00FF00">
This paragraph tag has...
</font></p>
</td></tr>
</table></br>
<table height="50" width="100" background="http://www.webcoachbd.com/images/stories/imagel.jpg" >
<tr><td>This table has a background image</td></tr>
</table></br>
<table height="200" width="300" background="http://www.webcoachbd.com/images/stories/imagel.jpg" >
<tr><td>This table has a background image</td></tr>
</table></br>
<table height="100" width="150" background="http://www.tizag.com/pics/htmlT/pattern.jpg" >
<tr><td>This table has a background patterned image</td></tr>
</table></br>
<table background="http://www.tizag.com/pics/htmlT/transparent.gif" >
<tr><td>This table has a red transparent background image</td></tr>
</table> ফলাফল>>
===================================================================================