ডেভসংকেত

এইচটিএমএল

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

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

  • devmuhib009
  • huzaifaalmesbah
  • AlAminKh03
  • tomal223
  • sabbirshawon
  • mdmahinpro
  • siddiqueco
  • mehedihasankhairul
  • iamraufu
  • sayedulsayem
  • zonayedpca

শেয়ার করুন

সাধারণ

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

    <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'>
    
    	অবশ্যই ভিডিও ইলিমেন্টের মধ্যে এই ইলিমেন্ট রাখতে হবে

ডেভসংকেত সম্পর্কে

ডেভসংকেত এর লক্ষ্য হচ্ছে বাংলাতে একটা বড় চিটশিটের ভান্ডার গড়ে তোলা। এটা সম্পূর্ণ স্বাধীন এবং ওপেন সোর্স গিটহাব অর্গানাইজেশন।

স্পন্সর