এইচটিএমএল

ডেভসংকেত

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

সাধারণ

এইচটিএমএল ডকুমেন্ট তৈরী করা

<html>...</html>

টাইটেলসহ অন্যান্য তথ্য সেট

<head>...</head>

দৃশ্যমান অংশ সেট

<body>...</body>

ডকুমেন্ট এর টাইটেল সেট

<title>...</title>

ফরম্যাট

নতুন প্যারাগ্রাফ তৈরী

<p>...</p>

লাইন ব্রেক

<br>

উক্তি তৈরী করা

<blockquote>...</blockquote>

ব্লক সেকশন তৈরী

<div>...</div>

একই লাইনে সেকশন তৈরী

<span>...</span>

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

ব্যাকগ্রাউন্ড কালার সেট

<body bgcolor=...>...</body>

লেখার কালার সেট

<body text=...>...</body>

লিঙ্ক এর কালার সেট

<body link=...>...</body>

ভিসিট করা লিঙ্ক এর কালার সেট

<body vlink=...>...</body>

অ্যাক্টিভ লিঙ্ক এর কালার সেট

<body alink=...>...</body>

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

অর্ডারবিহীন লিস্ট তৈরী

<ul>...</ul>

অর্ডার লিস্ট তৈরী

<ol>...</ol>

লিস্ট আইটেম

<li>...</li>

ডেফিনেশন লিস্ট তৈরী

<dl>...</dl>

ডেফিনেশন টার্ম

<dt>...</dt>

ডেফিনেশন বর্ণনা

<dd>...</dd>

ডিলেট বর্ণনা

<del>...</del>

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

সংক্ষেপণ

<abbr>...</abbr>

সংক্ষিপ্ত বিবরণ

<acronym>...</acronym>

চিত্রের ভিতরের একটি অঞ্চল সংজ্ঞা দেয়

<area>...</area>

লেখার ট্যাগ

ফরম্যাটেড লেখা

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

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

হরিজন্টাল লাইন

<hr>

হরিজন্টাল লাইনের উচ্চতা

<hr size>

হরিজন্টাল লাইনের দৈর্ঘ্য

<hr width>

হরিজন্টাল লাইন ছায়া ছাড়া

<hr noshade>

ইমেজ যুক্ত ইউআরএল দিয়ে

<img src="ইউআরএল">

ইমেজ অ্যালাইন করা

<img ... align=...>

ইমেজে বর্ডার

<img ... border=...>

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

ইমেজের উচ্চতা

<img ... height=...>

ইমেজের দৈর্ঘ্য

<img ... width=...>

ইমেজের বিকল্প লেখা

<img ... alt="বিকল্প-লেখা">

ইমেজের লোডিং লেখা

<img ... loading="লোডিং নাম">

লিঙ্ক

কোনো ইউআরএল এ হাইপারলিঙ্ক সেট

<a href="ইউআরএল">লেখা</a>

কোনো ইমেইলে এ হাইপারলিঙ্ক সেট

<a href="mailto:ইমেইল">লেখা</a>

ডকুমেন্ট এর মধ্যেই লিঙ্ক সেট

<a name="নাম">লেখা</a>

পেজের মধ্যেই লিঙ্ক সেট

<a href="#নাম">লেখা</a>

যেকোনো ডকুমেন্ট(ইমেজ, টেক্সট ইত্যাদি) ডাউনলোড করার লিঙ্ক

<a href="#ডকুমেন্ট পাথ" download="ফাইল নাম">লেখা</a>

পেজের সকল লিংক এর জন্য ডিফল্ট এড্রেস এবং টার্গেট সেট করা

<base href="#নাম">লেখা</a>

ফর্ম

ফর্ম তৈরী

<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="ভ্যালু">

ইনপুট ট্যাগ

ইমেইল অ্যাড্রেস এর জন্যে ইনপুট

<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>...</table>

টেবিল ক্যাপশন

<caption>...</caption>

টেবিল হেডার তৈরী

<thead>...</thead>

টেবিল বডী তৈরী

<tbody>...</tbody>

টেবিল ফুটার তৈরী

<tfoot>...</tfoot>

টেবিল হেডার সেল

<th>...</th>

রো সেট

<tr>...</tr>

টেবিল

রো তে সেল সেট

<td>...</td>

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

বর্ডারের দৈর্ঘ্য সেট

<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)

এইচটিএমএল ৫

ইন্ডিপেনডেন্ট কন্টেন্ট অথবা ডকুমেন্ট

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

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

ব্যাসিক অডিও

<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' />

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

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

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'>

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

এই চিটশিটে কন্ট্রিবিউট করেছেনঃ

  • devmuhib009

    Muhibul Haque

    username/devmuhib009

  • huzaifaalmesbah

    Huzaifa Al Mesbah

    username/huzaifaalmesbah

  • AlAminKh03

    AlAminKh03

    username/AlAminKh03

  • tomal223

    Towhozib Ahmed Tomal

    username/tomal223

  • sabbirshawon

    Sabbir Ahmed

    username/sabbirshawon

  • mdmahinpro

    MD MAHIN BIN RAIHAN

    username/mdmahinpro

  • siddiqueco

    Abu Bakar Siddique

    username/siddiqueco

  • mehedihasankhairul

    mehedi hasan khairul

    username/mehedihasankhairul

  • iamraufu

    iamraufu

    username/iamraufu

  • sayedulsayem

    Sayedul Sayem

    username/sayedulsayem

  • zonayedpca

    Zonayed Ahmed

    username/zonayedpca

ডেভসংকেত

বাংলা চিটশিটের ভান্ডার

devsonket.com

প্রিন্ট করুন