এইচটিএমএল সিএসএস জাভাস্ক্রিপ্ট পিএইচপি এসকিউএল জেকুয়েরি বুটস্ট্রাপ সি প্রোগ্রামিং
ফোরাম
×

এইচটিএমএল টিউটোরিয়াল

এইচটিএমএল হোম পেজ এইচটিএমএল পরিচিতি এবং গঠন এইচটিএমএল কোড এটিটর এইচটিএমএলের মৌলিক ধারণা এইচটিএমএল এলিমেন্ট এইচটিএমএল emty এলিমেন্ট এইচটিএমএল এট্রিবিউট এইচটিএমএল class এট্রিবিউট এইচটিএমএল style এট্রিবিউট এইচটিএমএল কমেন্ট এইচটিএমএল হেডিং এইচটিএমএল প্যারাগ্রাফ এইচটিএমএল টেক্সট ফরম্যাট এইচটিএমএল টেক্সট কোটেশন এইচটিএমএল কম্পিউটারকোড এইচটিএমএল টেবিল এইচটিএমএল লিস্ট এইচটিএমএল কালার এইচটিএমএল সিএসএস এইচটিএমএল লিংক এইচটিএমএল ইমেজ এইচটিএমএল ব্লক-ইনলাইন এলিমেন্ট এইচটিএমএল হেড এইচটিএমএল লেআউট এইচটিএমএল আইফ্রেম এইচটিএমএল জাভাস্ক্রিপ্ট এইচটিএমএল রেস্পন্সিভ এইচটিএমএল এনটিটি এইচটিএমএল অক্ষরসেট এইচটিএমএল সিম্বল এইচটিএমএল URL এনকোড এইচটিএমএল-XHTML px - em কনভার্শন

এইচটিএমএল ফর্ম

এইচটিএমএল ফর্ম এইচটিএমএল ফর্ম এলিমেন্ট এইচটিএমএল ইনপুট টাইপ এইচটিএমএল(৫) ইনপুট টাইপ এইচটিএমএল ইনপুট এট্রিবিউট

এইচটিএমএল৫

এইচটিএমএল৫ পরিচিতি ব্রাউজার সাপোর্ট এইচটিএমএল৫ এলিমেন্ট এইচটিএমএল৫ সিম্যান্টিক এলিমেন্ট এইচটিএমএল৫ মাইগ্রেশন এইচটিএমএল৫ স্টাইল গাইড

এইচটিএমএল মিডিয়া

মিডিয়া-Media ভিডিও-Video অডিও-Audio প্লাগ-ইন-PlugIn ইউটিউব-Youtube

এইচটিএমএল এপিআই

জিওলোকেশন-Geolocation ড্রাগ/ড্রপ-Drag/Drop লোকাল স্টোরেজ-LocalStorage অ্যাপ ক্যাশ-AppCache ওয়েব ওয়ার্কার-WebWorker এসএসই-SSE

এইচটিএমএল রেফারেন্স

রেফারেন্স- reference

 

এইচটিএমএল(৫) স্টাইল গাইড এবং কোডিং রীতি


DOCTYPE ডিক্লেয়ার

ডকুমেন্টের প্রথমেই ডকুমেন্টের টাইপ ডিক্লেয়ার করে দিতে হয়। আপনি নিচের দুইটি পদ্ধতি ব্যবহার করে টাইপ ডিক্লেয়ার করতে পারেনঃ

উদাহরণ

<!DOCTYPE html>

উদাহরণ

<!dOCTYPE html>

এলিমেন্টের নাম

এইচটিএমএল(৫) বড় হাতের এবং ছোট হাতের বর্ণের মিশ্রিত এলিমেন্টের নাম গ্রহন করে। কিন্তু এটি ভালো অভ্যাস নয়। আমরা এক্সএইচটিএমএলের গঠন অনুযায়ী এইচটিএমএল কোডিং শিখবোঃ

উদাহরণ

ভূল

 <SECTION>
   <p>একটি ভূল উদাহরণ দেখানো হলো</p>
 </SECTION>

উদাহরণ

সঠিক

<section>
  <p>একটি সঠিক উদাহরণ দেখানো হলো</p>
</section>

মেটা ডেটা

<title> এলিমেন্ট এইচটিএমএল(৫) এ অত্যাবশ্যকীয়। <title> এলিমেন্টটি সার্চ ইঞ্জিনে ইন্ডেক্সিংয়ের ক্ষেত্রে খুব গুরুত্বপূর্ণ ভূমিকা রাখে।

উদাহরণ

<!DOCTYPE html>
<html lang="bn">
<head>
   <meta charset="UTF-8">
   <title>এইচটিএমএল(৫) সিনট্যাক্স</title>
</head>
</html>

স্টাইল শীট

স্টাইল শীটের লিংকে type এট্রিবিউট ব্যবহার করার কোনো প্রয়োজন নেইঃ

উদাহরণ

<link rel="stylesheet" href="style.css">

এক লাইনে সিএসএসঃ

উদাহরণ

h1 style={color:blue; float:left;}

একাধিক লাইনে সিএসএসঃ

উদাহরণ

body {
  border: 1px solid blue;
  background-color: cyan;
  color: black;
  font-family: "Times New Roman", Times, serif;
  font-size: 30px;
}

এলিমেন্টের ক্লোজিং

এইচটিএমএল(৫) এ, আপনাকে সকল এলিমেন্টকে ক্লোজ না করলেও হয়, কিন্তু সকল এলিমেন্টের ক্লোজিং ট্যাগ ব্যবহার করা ভালো অভ্যাসঃ

ভূল

উদাহরণ

<section>
  <p>এখানে p এর ক্লোজিং ট্যাগ ব্যবহার করা হয়নি
  <p>এখানে p এর ক্লোজিং ট্যাগ ব্যবহার করা হয়নি
</section>

সঠিক

উদাহরণ

<section>
  <p>এখানে p এর ক্লোজিং ট্যাগ ব্যবহার করা হয়েছে</p>
  <p>এখানে p এর ক্লোজিং ট্যাগ ব্যবহার করা হয়েছে</p>
</section>

এম্পটি এলিমেন্টের ক্লোজিং

এইচটিএমএলে এম্পটি এলিমেন্টের ক্লোজিং ট্যাগ ব্যবহার করা বাধ্যতামূলক নয়। এটি একান্তই আপনার ইচ্ছা।

এখানে দুটিই সঠিকঃ

উদাহরণ

<meta charset="utf-8">

উদাহরণ

<meta charset="utf-8"/>

এট্রিবিউটের নাম

এইচটিএমএল(৫) এট্রিবিউটের নামের বড় হাতের এবং ছোট হাতের উভয় লেখা গ্রহন করে। নিচের উদাহরণ দেখিঃ

ভূল

উদাহরণ

<div CLASS="Item">

সঠিক

উদাহরণ

<div class="Item">

এট্রিবিউটের ভ্যালুতে কোটেশন

এইচটিএমএল(৫) এ, এট্রিবিউটের ভ্যালু কোটেশন ছাড়াও গ্রহন করে। কিন্তু ভ্যালুর মাঝে যদি স্পেস থাকে তবে অবশ্যই কোটেশন ব্যবহার করতে হবে। তাই কোটেশন ব্যবহারের অভ্যাস করাই ভালো।

এটি কাজ করবে নাঃ

উদাহরণ

<ul style=list-style-type:disc>

এটি কাজ করবেঃ

উদাহরণ

<ul style="list-style-type:disc">

img এট্রিবিউট

ইমেজ ট্যাগে সবসময় alt এট্রিবিউট ব্যবহার করবেনঃ

উদাহরণ

<img src="nilgiri.jpg" alt="Nilgiri Bangladesh" style="width:110px;height:110px">

ইমেজের দৈর্ঘ্য ও প্রস্থ নির্ধারণ করে দেওয়া একটি ভালো অভ্যাসঃ

উদাহরণ

<img src="nilgiri.jpg" alt="Nilgiri Bangladesh" style="width:110px;height:110px">

স্পেস এবং সমান চিহ্ন

সমান চিহ্নের চারদিকে স্পেস দেওয়া যায়ঃ

উদাহরণ

<link rel = "stylesheet" href = "styles.css">

পড়ার সুবিধার্থে স্পেস না দেওয়া ভালোঃ

উদাহরণ

<link rel="stylesheet" href="styles.css">

খালি লাইন এবং ইনডেন্টেশন

কোডিং-এ কারণ ছাড়া খালি লাইন রাখা ভালো অভ্যাস নয়। কোড ব্লককে আলাদা করার জন্য আমরা খালি লাইন রাখতে পারি।

কোডিং-এর সৌন্দর্য্য এবং পড়ার সুবিধার্থে আমরা ইনডেন্টেশন করতে পারি। আমরা এডিটরে ট্যাব সাইজ ২ ব্যবহার করতে পারি, এটি আপনার কোডকে দেখতে সুন্দর দেখাবে।

এটি ব্যবহার এর প্রয়োজন নেই

উদাহরণ

<body>

  <h1>জনপ্রিয় শহর</h1>
  <h2>লন্ডন</h2>
  <p>
   লন্ডন ইংল্যান্ডের সবচেয়ে বড় শহর।এটি যুক্তরাজ্যের সবচেয়ে জনপ্রিয় শহর, এখানে ১৩ লক্ষেরও বেশি বাসিন্দা রয়েছে।
   লন্ডন ইংল্যান্ডের সবচেয়ে বড় শহর। এটি যুক্তরাজ্যের সবচেয়ে জনপ্রিয় শহর, এখানে ১৩ লক্ষেরও বেশি বাসিন্দা রয়েছে।
  </p>

</body>

ব্যবহার এর সঠিক পদ্ধতি

উদাহরণ

<body>

<h1>জনপ্রিয় শহর</h1>

<h2>লন্ডন</h2>
<p>লন্ডন ইংল্যান্ডের সবচেয়ে বড় শহর। এটি যুক্তরাজ্যের সবচেয়ে জনপ্রিয় শহর, এখানে ১৩ লক্ষেরও বেশি বাসিন্দা রয়েছে।</p>

</body>

লিস্টের উদাহরণঃ

উদাহরণ

<ol>
 <li>পদ্মা</li>
 <li>মেঘনা</li>
 <li>যমুনা</li>
</ol>

টেবিলের উদাহরণঃ

উদাহরণ

<table>
 <tr>
    <th>নাম</th>
    <th>বর্ণনা</th>
 </tr>
 <tr>
    <td>A</td>
    <td>A এর বর্ণনা</td>
 
</tr>
  <tr>
    <td>B</td>
    <td>B এর বর্ণনা</td>
  </tr>
</table>

এইচটিএমএল কমেন্ট

এইচটিএমএলে <!-- এর পরে একটি স্পেস এবং --> এর পুর্বে একটি স্পেস দিয়ে সিংগেল লাইন কমেন্ট করা হয়ঃ

উদাহরণ

<!-- এটি একটি মন্তব্য -->

একাধিক লাইনের একটি কমেন্টঃ

উদাহরণ

<!--
এটি একটি বড় মন্তব্যের উদাহরণ। এটি একটি বড় মন্তব্যের উদাহরণ। এটি একটি বড় মন্তব্যের উদাহরণ।
এটি একটি বড় মন্তব্যের উদাহরণ। এটি একটি বড় মন্তব্যের উদাহরণ।এটি একটি বড় মন্তব্যের উদাহরণ।
-->