এইচটিএমএল

এইচটিএমএল(HTML) এর পূর্নরুপ হচ্ছে Hypertext Markup Language, ওয়েব পেজ ও ওয়েব অ্যাপ্লিকেশন তৈরী করার জন্যে স্ট্যান্ডার্ড মার্কাপ ল্যাংগুয়েজ হিসেবে ব্যবহৃত হয়

কন্ট্রিবিউটর

শেয়ার করুন

প্রিন্ট করুন

সাধারণ

এইচটিএমএল ডকুমেন্ট তৈরী করা
```
<html>...</html>
```
টাইটেলসহ অন্যান্য তথ্য সেট
```
<head>...</head>
```
দৃশ্যমান অংশ সেট
```
<body>...</body>
```
ডকুমেন্ট এর টাইটেল সেট
```
<title>...</title>
```

বডি অ্যাট্রিবিউট(ইমেইল টেমপ্লেট)

ব্যাকগ্রাউন্ড কালার সেট
```
<body bgcolor=...>...</body>
```
লেখার কালার সেট
```
<body text=...>...</body>
```
লিঙ্ক এর কালার সেট
```
<body link=...>...</body>
```
ভিসিট করা লিঙ্ক এর কালার সেট
```
<body vlink=...>...</body>
```
অ্যাক্টিভ লিঙ্ক এর কালার সেট
```
<body alink=...>...</body>
```

লেখার ট্যাগ

ফরম্যাটেড লেখা
```
<pre>...</pre>
```
হেডলাইন
```
<[h1-h6]>...</[h1-h6]>
```
বোল্ড লেখা
```
<b>...</b>
```
ইটালিক লেখা
```
<i>...</i>
```
টাইপরাইটার স্টাইল লেখা
```
<tt>...</tt>
```
কোড লেখা
```
<code>...</code>
```
সাইটেশান
```
<cite>...</cite>
```
অ্যাড্রেস লেখার সেকশন
```
<address>...</address>
```
মার্কি লেখা
```
<marquee>...</marquee>
```
চিহ্নিত লেখা
```
<mark>...</mark>
```
ছোট লেখা
```
<small>...</small>
```
মুছে ফেলা লেখা
```
<del>...</del>
```
সাবস্ক্রিপ্ট লেখা
```
<sub>...</sub>
```
সুপারস্ক্রিপ্ট লেখা
```
<sup>...</sup>
```
এম্ফাসাইজ বা জোর দেয়া
```
<em>...</em>
```
স্ট্রং বা শক্তিশালী
```
<strong>...</strong>
```
ফন্ট সাইজ সেট(1-7)
```
<font size=...>...</font>
```
ফন্ট কালার সেট
```
<font color=...>...</font>
```
ফন্ট সেট
```
<font face=...>...</font>
```

লিঙ্ক

কোনো ইউআরএল এ হাইপারলিঙ্ক সেট
```
<a href="ইউআরএল">লেখা</a>
```
কোনো ইমেইলে এ হাইপারলিঙ্ক সেট
```
<a href="mailto:ইমেইল">লেখা</a>
```
ডকুমেন্ট এর মধ্যেই লিঙ্ক সেট
```
<a name="নাম">লেখা</a>
```
পেজের মধ্যেই লিঙ্ক সেট
```
<a href="#নাম">লেখা</a>
```
যেকোনো ডকুমেন্ট(ইমেজ, টেক্সট ইত্যাদি) ডাউনলোড করার লিঙ্ক
```
<a href="#ডকুমেন্ট পাথ" download="ফাইল নাম">লেখা</a>
```
পেজের সকল লিংক এর জন্য ডিফল্ট এড্রেস এবং টার্গেট সেট করা
```
<base href="#নাম">লেখা</a>
```

ইনপুট ট্যাগ

ইমেইল অ্যাড্রেস এর জন্যে ইনপুট
```
<input type="email" name="নাম">
```
পাসওয়ার্ড এর জন্যে ইনপুট
```
<input type="password" name="নাম">
```
ইউআরএল এর জন্যে ইনপুট
```
<input type="url" name="নাম">
```
নাম্বার এর জন্যে ইনপুট
```
<input type="number" name="নাম">
```
নাম্বার রেঞ্জ এর জন্যে ইনপুট
```
<input type="range" name="নাম">
```

তারিখ এর জন্যে ইনপুট

<input type="date/month/week/time/datetime/datetime-local" name="নাম">

সার্চ এর জন্যে ইনপুট
```
<input type="search" name="নাম">
```
কালার এর জন্যে ইনপুট
```
<input type="color" name="নাম">
```
টেলিফোন নাম্বার এর জন্যে ইনপুট
```
<input type="tel" name="নাম">
```
ফাইল আপলোডের জন্য ইনপুট
```
<input type="file" name="নাম">
```

টেবিল অ্যাট্রিবিউট

বর্ডারের দৈর্ঘ্য সেট
```
<table border=...>...</table>
```
সেলের মধ্যকার স্পেস
```
<table cellspacing=...>...</table>
```
সেলের বর্ডার এবং কন্টেন্ট এর মধ্যকার স্পেস
```
<table cellpadding=...>...</table>
```
টেবিলের দৈর্ঘ্য
```
<table width=...>...</table>
```
রো এর ভিতরে সেলের অ্যালাইনমেন্ট
```
<tr align=...>...</tr>
```
সেলের অ্যালাইনমেন্ট
```
<td align=...>...</td>
```
রো এর ভিতরে সেলের উপর-নিচ অ্যালাইনমেন্ট
```
<tr valign=...>...</tr>
```
সেলের উপর-নিচ অ্যালাইনমেন্ট
```
<td valign=...>...</td>
```
একটা সেলের রো সংখ্যা
```
<td rowspan>...</td>
```
একটা সেলের কলাম সংখ্যা
```
<td colspan>...</td>
```
সেলের লাইন না ভাঙ্গা
```
<td nowrap>...</td>
```
জোড় টেবিল রো সিলেক্ট করা
```
tr:nth-child(even)
```
বিজোড় টেবিল রো সিলেক্ট করা
```
tr:nth-child(odd)
```

মাল্টিমিডিয়া (অডিও এবং ভিডিও)

ব্যাসিক অডিও
```
<audio src=''> </audio>
```
অডিও ইলিমেন্টের এট্রিভিউটস সমূহ
```
controls, autoplay, loop, muted, preload
```

অডিও ইলিমেন্টের ফলব্যাক এট্রিভিউট

<source src='palyer.mp3' type='audio/mp3' />

	<source src='player.ogg' type='audio/ogg' />

	অবশ্যই অডিও ইলিমেন্টের মধ্যে এই ইলিমেন্ট রাখতে হবে

ভিডিও ব্যাসিক
```
<video src='' controls> </video>
```

ভিডিও ইলিমেন্টের এট্রিভিউটস সমূহ

controls, autoplay, loop, muted, preload, height, width, poster 

	 মুলত অডিও এট্রিভিউট এবং ভিডিও এট্রিভিউট একই শুধু ('height, width, poster') ছাড়া, কমন সেন্স, রাইট? 😁

অডিও ইলিমেন্টের ফলব্যাক এট্রিভিউট

<source src='palyer.mp4' type='video/mp4' />

	<source src='player.webm' type='video/webm' />

অবশ্যই ভিডিও ইলিমেন্টের মধ্যে এই ইলিমেন্ট রাখতে হবে

ফরম্যাট

নতুন প্যারাগ্রাফ তৈরী
```
<p>...</p>
```
লাইন ব্রেক
```
<br>
```
উক্তি তৈরী করা
```
<blockquote>...</blockquote>
```
ব্লক সেকশন তৈরী
```
<div>...</div>
```
একই লাইনে সেকশন তৈরী
```
<span>...</span>
```

বডি অ্যাট্রিবিউট(ইমেইল টেমপ্লেট)

অর্ডারবিহীন লিস্ট তৈরী
```
<ul>...</ul>
```
অর্ডার লিস্ট তৈরী
```
<ol>...</ol>
```
লিস্ট আইটেম
```
<li>...</li>
```
ডেফিনেশন লিস্ট তৈরী
```
<dl>...</dl>
```
ডেফিনেশন টার্ম
```
<dt>...</dt>
```
ডেফিনেশন বর্ণনা
```
<dd>...</dd>
```
ডিলেট বর্ণনা
```
<del>...</del>
```
সংক্ষেপণ
```
<abbr>...</abbr>
```
সংক্ষিপ্ত বিবরণ
```
<acronym>...</acronym>
```
চিত্রের ভিতরের একটি অঞ্চল সংজ্ঞা দেয়
```
<area>...</area>
```

গ্রাফিক্যাল ইলিমেন্ট

হরিজন্টাল লাইন
```
<hr>
```
হরিজন্টাল লাইনের উচ্চতা
```
<hr size>
```
হরিজন্টাল লাইনের দৈর্ঘ্য
```
<hr width>
```
হরিজন্টাল লাইন ছায়া ছাড়া
```
<hr noshade>
```
ইমেজ যুক্ত ইউআরএল দিয়ে
```
<img src="ইউআরএল">
```
ইমেজ অ্যালাইন করা
```
<img ... align=...>
```
ইমেজে বর্ডার
```
<img ... border=...>
```
ইমেজের উচ্চতা
```
<img ... height=...>
```
ইমেজের দৈর্ঘ্য
```
<img ... width=...>
```
ইমেজের বিকল্প লেখা
```
<img ... alt="বিকল্প-লেখা">
```
ইমেজের লোডিং লেখা
```
<img ... loading="লোডিং নাম">
```

ফর্ম

ফর্ম তৈরী
```
<form>...</form>
```
ডাটালিস্ট তৈরী
```
<datalist>...</datalist>
```
একাধিক সিলেক্ট করার মেনু তৈরী
```
<select multiple name="নাম" size="সাইজ">...</select>
```
সিলেক্ট করার মেনু তৈরী
```
<select name="নাম">...</select>
```
সিলেক্ট মেনুর অপশন
```
<option>...</option>
```
লেখার বক্স তৈরী কলাম রো সহ
```
<textarea name="নাম" cols=... rows=...>...</textarea>
```

চেকবক্স তৈরী

<input type="checkbox" name="নাম" value="ভ্যালু">

চেকবক্স চেক অবস্থায় তৈরী
```
<input type="checkbox" ... ... checked>
```

রেডিও বাটন তৈরী

<input type="radio" name="নাম" value="ভ্যালু">

রেডিও বাটন চেক অবস্থায় তৈরী
```
<input type="checkbox" ... ... checked>
```

লেখার বক্স তৈরী

<input type="text" name="নাম" value="ভ্যালু">

সাবমিট বাটন তৈরী

<input type="submit" value="ভ্যালু">

রিসেট বাটন তৈরী

<input type="reset" name="নাম" value="ভ্যালু">

টেবিল

টেবিল তৈরী
```
<table>...</table>
```
টেবিল ক্যাপশন
```
<caption>...</caption>
```
টেবিল হেডার তৈরী
```
<thead>...</thead>
```
টেবিল বডী তৈরী
```
<tbody>...</tbody>
```
টেবিল ফুটার তৈরী
```
<tfoot>...</tfoot>
```
টেবিল হেডার সেল
```
<th>...</th>
```
রো সেট
```
<tr>...</tr>
```
রো তে সেল সেট
```
<td>...</td>
```

এইচটিএমএল ৫

ইন্ডিপেনডেন্ট কন্টেন্ট অথবা ডকুমেন্ট
```
<article></article>
```
রিলেটেড অংশ একটা পেজের
```
<aside></aside>
```
অডিও ফাইল সংযুক্ত
```
<audio src=""></audio>
```
গ্রাফিকাল কিছু প্রেজেন্ট করতে
```
<canvas></canvas>
```
অতিরিক্ত ইনফরমেশন
```
<details></details>
```
বাহিরের কোন ইন্টারেক্টিভ কন্টেন্ট
```
<embed src="" type="">
```
স্বয়ংসম্পূর্ণ প্রবাহ সামগ্রী
```
<figure></figure>
```
ছবির ক্যাপশন দেওয়া
```
<figcaption></figcaption>
```
ফুটার সেকশন এর জন্য
```
<footer></footer>
```
হেডার সেকশন এর জন্য
```
<header></header>
```
একটি সেকশনের প্রধান
```
<hgroup></hgroup>
```
ন্যাভিগেশন
```
<nav></nav>
```
একটি জেনেরিক ডকুমেন্ট বা অ্যাপ্লিকেশন বিভাগ
```
<section></section>
```
ভিডিও ফাইল সংযুক্ত
```
<video src=""></video>
```
লাইন বিরতির সুযোগ
```
<wbr>
```

ভিডিও ইলিমেন্টের সাবটাইটেল এবং ক্যাপশন

track element ভিডিওতে সাবটাইটেল এড করার জন্য
```
<track kind='subtitles' src='subtitles_es.vtt' srclang='es' label='Spanish' />
```
track ইলিমেন্টের এট্রিভিউটস সমূহ
```
kind, src, srclang, label, default
```

বিভিন্ন রকমের সাবটাইটেল এড করা

 <track label='English' kind='subtitles' srclang='en' src='captions/vtt/sintel-en.vtt' default />

	 (এই সাবটাইটেলটি বাই ডিফল্ট শো করবে default এট্রিবিউট এর কারনে)

	<track label='Deutsch' kind='subtitles' srclang='de' src='captions/vtt/sintel-de.vtt' />

	<track kind='subtitles' src='subtitles_es.vtt' srclang='es' label='Spanish'>

	অবশ্যই ভিডিও ইলিমেন্টের মধ্যে এই ইলিমেন্ট রাখতে হবে