এইচটিএমএল(৫) স্টাইল গাইড এবং কোডিং রীতি
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>
এইচটিএমএল কমেন্ট
এইচটিএমএলে <!-- এর পরে একটি স্পেস এবং --> এর পুর্বে একটি স্পেস দিয়ে সিংগেল লাইন কমেন্ট করা হয়ঃ
উদাহরণ
<!-- এটি একটি মন্তব্য -->
একাধিক লাইনের একটি কমেন্টঃ
উদাহরণ
<!--
এটি একটি বড় মন্তব্যের উদাহরণ। এটি একটি বড় মন্তব্যের উদাহরণ। এটি একটি বড় মন্তব্যের উদাহরণ।
এটি একটি বড় মন্তব্যের উদাহরণ। এটি একটি বড় মন্তব্যের উদাহরণ।এটি একটি বড় মন্তব্যের উদাহরণ।
-->