এইচটিএমএল স্টাইল গাইড- HTML Style Guide



এই অধ্যায়ে এইচটিএমএল ৫ এর কিছু নিয়ম নীতি নিয়ে আলোচনা করা হয়েছে।


সঠিক Doctype নির্ধারণ

ডকুমেন্টের প্রথমেই সঠিক ভাবে ডকুমেন্টের টাইপ ডিক্লেয়ার করে দিতে হয়। নিচে এর উদাহরন দেখুন।

উদাহরণ

<!DOCTYPE html>


lowercase বা ছোট হাতের অক্ষরে doctype নির্ধারণ করা যায়। নিচে এর উদাহরন দেখুন।

উদাহরণ

<!doctype html>




lowercase বা ছোট হাতের অক্ষরে এলিমেন্টের নাম

যদিও এইচটিএমএল ৫, lowercase এবং uppercase এর মিস্রিত এলিমেন্টের নাম সমর্থন করে। কিন্তু তারপরও আমরা আপনাকে এটা করতে সমর্থন করি না। আমরা কেবল মাত্র lowercase বা ছোট হাতের অক্ষর এলিমেন্ট গুলোর জন্য ব্যবহার করার পরামরস দিছি। এর কারনগুলো হল নিম্নরুপ -

lowercase এবং uppercase এর মিস্রিত ব্যবহার দেখতে খারাপ,
ডেভেলপাররা সাধারণত lowercase বর্ণ ব্যবহার করে থাকে,
Lowercase বর্ণ দেখতে বেশ সুন্দর ও পরিস্কার,
Lowercase বর্ণ লেখতে বা কোডিং করতে বেশ সহজ।

উচিৎ নয়

<SECTION>
<p>This is a paragraph.


<SECTION>



খুব খারাপ পদ্ধতি

<Section>
<p>This is a paragraph.</p>
</SECTION>



উদাহরণ

<section>
<p>This is a paragraph.</p>
</section>




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

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

উচিৎ নয়

<section>
<p>This is a paragraph.
<p>This is a paragraph.
</section>



ভাল পদ্ধতি

<section>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
</section>




Empty এইচটিএমএল এলিমেন্ট ট্যাগ গুলো ক্লোজ

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

উদাহরণ

<meta charset="utf-8">


তারপরও আমরা আপনাকে ক্লোজিং ট্যাগ ব্যবহার করার জন্য পরামর্শ প্রদান করছি। কারন closing slash " / " XHTML এবং XML এর জন্য প্রয়োজন। নিচে একটি উদাহরন দেখুন।

উদাহরণ

<meta charset="utf-8" />



lowercase বা ছোট হাতের অক্ষরে এট্রিবিউটের নাম লিখুন

যদিও এইচটিএমএল ৫, lowercase এবং uppercase এর মিস্রিত এট্রিবিউটের নাম সমর্থন করে। কিন্তু তারপরও আমরা আপনাকে এটা করতে পরামর্শ প্রদান করি না। আমরা কেবল মাত্র lowercase বা ছোট হাতের অক্ষর ব্যবহার করে এট্রিবিউটের নাম লেখার পরামর্শ প্রদান করছি। এর কারনগুলো হল নিম্নরুপ -

lowercase এবং uppercase এর মিস্রিত ব্যবহার দেখতে খারাপ,
ডেভেলপাররা সাধারণত lowercase বর্ণ ব্যবহার করে থাকে,
Lowercase বর্ণ দেখতে বেশ সুন্দর ও পরিস্কার,
Lowercase বর্ণ লেখতে বা কোডিং করতে বেশ সহজ।

ভুল পদ্ধতি

<div CLASS="menu">



সঠিক পদ্ধতি

<div class="menu">




এট্রিবিউটের মানে কোটেশনের ব্যবহার

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

নিচের উদাহরনের কোড কাজ করবে না, কারন এখানে একটি স্পেস আছে

উচিৎ নয়

<table class=table striped>



উচিৎ নয়

<table class=striped>



সঠিক পদ্ধতি

<table class="striped">




img এট্রিবিউট

সব সময় img এট্রিবিউট এর সাথে alt এট্রিবিউট ব্যবহার করুন, এর ফলে কোন কারনে ছবিটি ব্রাউজার পরিদর্শন করতে বার্থ হলে ইউজার ছবি সম্পর্কে তথ্য পাবে। img এট্রিবিউট এর সাথে width এবং height এট্রিবিউট ও ব্যবহার করে ছবির দৈর্ঘ্য ও প্রস্থ নির্ধারণ করে দিন, এর ফলে ওয়েব পেজের লেআউট নষ্ট হবে না।

ভুল পদ্ধতি

<img src="html5.gif">



সঠিক পদ্ধতি

<img src="html5.gif" alt="HTML5" style="width:128px;height:128px">




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

এইচটিএমএল ৫ এ সমান ছিনহের পাসে স্পেস ব্যবহার করা যায়। কিন্তু পড়ার সুবিধার্থে স্পেস না দেওয়াই ভালো।

উচিৎ নয়

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



সঠিক পদ্ধতি

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




দীর্ঘ লাইন পরিহার

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

80 টি ক্যারেক্টার এর বেসি কোড লাইন না করাই ভাল, এর ফলে স্ক্রল বার বার করতে হয় না।


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

কোনো কারণ ছাড়াই ফাঁকা লাইন যোগ করবেন না। তবে পঠনযোগ্যতা বা readability এর জন্য, বড় বা লজিক্যাল কোড ব্লক পৃথক করার জন্য ফাঁকা লাইন যোগ জেতে পারে। পঠনযোগ্যতা বা readability এর জন্য, খাঁজ বা indentation এ দুটি স্পেস যোগ করুন। কিন্তু ট্যাব কী একদমই ব্যবহার করা উচিৎ না।
অপ্রয়োজনীয় ফাঁকা লাইন এবং ইন্ডেন্টেশন ব্যবহার করবেন না। প্রতিটি এলিমেন্টের জন্য indentation প্রয়োজন হয় না।

অপ্রয়জনিয়

<body>

<h1>Famous Cities</h1>

<h2>Tokyo</h2>

<p>
Tokyo is the capital of Japan, the center of the Greater Tokyo Area,
and the most populous metropolitan area in the world.
It is the seat of the Japanese government and the Imperial Palace,
and the home of the Japanese Imperial Family.
</p>

</body>



সঠিক পদ্ধতি

<body>

<h1>Famous Cities</h1>

<h2>Tokyo</h2>

Tokyo is the capital of Japan, the center of the Greater Tokyo Area,
and the most populous metropolitan area in the world.
It is the seat of the Japanese government and the Imperial Palace,
and the home of the Japanese Imperial Family.</p>

</body>



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

<table>
<tr>
<th>Name</th>
<th>Description</th>
</tr>
<tr>
<td>A</td>
<td>Description of A</td>
</tr>
</table>



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

<ol>
<li>London</li>
<li>Paris</li>
<li>Tokyo</li>
</ol>




<html> এবং <body> বাদ দেয়া

এইচটিএমএল ৫ ডকুমেন্টে <html> এবং <body> ট্যাগ বাদ দেয়া যায়। নিচে একটি উদাহরণ দেখুন।

উদাহরণ

<!DOCTYPE html>
<head>
<title>Page Title</title>
</head>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>


কিন্তু তারপরও আমরা <html> এবং <body> ট্যাগ বাদ দেওয়ার সুপারিশ করি না <Html> এলিমেন্টটি হল রুট বা মুল ডকুমেন্ট।

এখানে ওয়েব পেজের ভাষা নির্দিষ্ট করার জন্য lang এট্রিবিউট ব্যবহার করা হয়। ওয়েব পেজের ভাসা নির্ধারণ করে দেয়া, screen reader এর মত ওয়েব অ্যাপ্লিকেশন গুলো এবং সার্চ ইঞ্জিন এর জন্য প্রয়জনিয়। তাছারা <html> এবং <body> বাদ দেয়ার ফলে DOM এবং XML সফটওয়ার ক্রাশ করতে পারে। আবার <body> ট্যাগ বাদ দেয়ার ফলে পুরনো ভার্সনের ব্রাউজার যেমন - IE9 তে error হতে পারে।

উদাহরণ

<!DOCTYPE html>
<html lang="en-US">




<head> ট্যাগ বাদ দেয়া

এইচটিএমএল ৫ এ <head> ট্যাগ বাদ দেয়া যায়।

কিন্তু আমরা <head> ট্যাগ বাদ দেয়ার জন্য সমর্থন করি না। কারন এটা ওয়েব ডেভেলপারদের কাছে অপরিচিত এবং এটি এখনও কোন গাইড লাইন হিসেবে এখনও প্রতিস্থিত হয় নি।

উদাহরণ

<!DOCTYPE html>
<html>
<title>Page Title</title>

<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>

</html>




মেটা ডাটা

এইচটিএমএল ৫ এ </title> এলিমেন্ট ব্যবহার করতে হবে এবং </title> ট্যাগের তথ্য যথা সম্ভব অর্থপূর্ণ হতে হবে।

উদাহরণ

<title>HTML5 Syntax and Coding Style</title>


সার্চ ইঞ্জিন ইনডেক্সিং এবং সার্চ ইঞ্জিন এর কাছে সঠিক ভাবে ওয়েব পেজ ব্যাখ্যা করার জন্য সঠিক ভাবে ক্যারেক্টার এনকোডিং এবং lang এট্রিবিউট ব্যবহার করতে হবে।

উদাহরণ

<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>HTML5 Syntax and Coding Style</title>
</head>




কমেন্ট

ছোট কমেন্ট গুলো একটি লাইনে লেখাই ভাল। এক লাইনের কমেন্ট গুলো নিচের মত করে লিখতে হবে।

উদাহরণ

<!-- This is a comment -->


বড় কমেন্ট গুলো সাধারণত এক লাইনে লেখা যায় না, সেক্ষেত্রে একাধিক লাইনে কমেন্ট গুলো লিখতে হবে। নিচের উদাহরণে একাধিক লাইনের কমেন্ট লেখার পদ্ধতি দেখুন।

উদাহরণ

<!--
It's a long comment example.
It's a long comment example.
-->




ভিউপোর্ট নির্ধারণ করা

html 5 এ ওয়েব ডিজাইনারদের জন্য <meta> ট্যাগের মাধ্যমে ভিউপোর্ট নির্ধারণ করার একটি পদ্ধতির প্রচলন করা হয়েছে। ওয়েব পেজে <meta> ব্যবহার করে ভিউপোর্ট নির্ধারন করার জন্য viewport এলিমেন্টটিকে নিচের মত করে ব্যবহার করতে হবে।

উদাহরণ

<meta name="viewport" content="width=device-width, initial-scale=1.0">


একটি <meta> ভিউপোর্ট এলিমেন্ট, কোন ওয়েব পেজ কিভাবে প্রদর্শিত হবে তা নির্ধারণ করে।

width=device-width এই অংশটি ভিন্ন ভিন্ন ডিভাইসের প্রস্থ অনুযায়ী ওয়েব পেজের প্রস্থ নির্ধারণ করে।

initial-scale=1.0 এই অংশটি ব্রাউজার ওয়েব পেজ লোড করার সময় পেজের প্রাথমিক জুম-লেভেল নির্ধারণ করে।


স্টাইল সিট ব্যবহার

সাধারন সিনট্যাক্স ব্যবহার করে স্টাইল সিট লিংক করুন। type এট্রিবিউট ব্যবহারের প্রয়োজনীয়তা নেই।

উদাহরণ

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


ছোট ছোট সিএসএস কোড গুলো নিচের মত করে লিখুন।

উদাহরণ

p.intro {font-family: Verdana; font-size: 16em;}


একাধিক লাইনের সিএসএস কোড গুলো নিচের মত করে লিখুন।

উদাহরণ

body{
background-color: lightgrey;
font-size: 16em;
color: black;
}




জাভাস্ক্রিপ্ট লোড করা

সাধারন সিনট্যাক্স ব্যবহার করে জাভাস্ক্রিপ্ট লিংক করুন। type এট্রিবিউট ব্যবহারের প্রয়োজনীয়তা নেই।

উদাহরণ

<script src="myscript.js">




ফাইল এক্সটেন্সন

HTML ফাইলের এক্সটেন্সন হতে হবে .htm অথবা .html, CSS ফাইলের এক্সটেন্সন হতে হবে .css এবং JavaScript ফাইলের এক্সটেন্সন হতে হবে .js


.html এবং .htm এর পার্থক্য

.html এবং .htm এর মধ্যে আসলে তেমন কোন পার্থক্য নেই। .html অথবা .htm এক্সটেন্সন যুক্ত সকল ফাইলকেই সকল আধুনিক ব্রাউজার অথবা সার্ভার এইচটিএমএল ডকুমেন্ট হিসেবেই বিবেচনা করবে।

.htm শুরুতে DOS সিস্টেমের জন্য তিন অক্ষরের এক্সটেনশন সীমাবদ্ধ করে।

.html ইউনিক্স অপারেটিং সিস্টেমের এর জন্য নির্ধারণ করা হয়, যেখানে কোন সীমাবদ্ধতা নেই।

যখন কোন URL এ কোন ফাইল নাম নিরধারিত থাকে না, (যেমন - https://www.websschool.com/css/) তখন সার্ভার একটি স্বয়ংক্রিয় ফাইল নাম ফেরত পাঠায়। সাধারণত ফাইল নামগুলো হয় index.html, index.htm, default.html এবং default.htm.

যদি আপনার সার্ভার শুধু মাত্র "index.html" ফাইল নামেই কনফিগার করা থাকে, তবে আপনার ফাইল নামটি অবশই "index.html" নামে হতে হবে, "index.htm" নয়।

তবে সার্ভার একাধিক ডিফল্ট ফাইলের নাম দিয়েও কনফিগার করা যায়, এবং সাধারণত প্রয়োজনীয় যতগুলি ডিফল্ট ফাইলের নাম প্রয়োজন সেগুল নির্ধারণ করা যায়।

যাইহোক, এইচটিএমএল ফাইলের জন্য পূর্ণ এক্সটেনশন হল .html, এবং এটি ব্যবহার না করার কোন যুক্তি যুক্ত কারন নেই।







এই ওয়েব সাইট এর সমস্ত টিউটোরিয়াল, সার্কিট ডায়াগ্রাম, উদাহরণ ইত্যাদি খুব সহজ ও সাধারণ ভাবে তৈরি করা হয়েছে। টিউটোরিয়াল, সার্কিট ডায়াগ্রাম, উদাহরণ ইত্যাদির ভুল পরিহার করার জন্য বার বার যাচাই করা হয়েছে, কিন্তু আমরা এর পূর্ণ নিশ্চয়তা ও দায়ভার বহন করি না। যখন আপনি এই সাইটটি ব্যবহার করেন, আমরা ধরে নেই যে আপনি পড়েছেন এবং সম্মত আছেন আমাদের টার্মস অফ ইউস (Terms of use) এবং প্রাইভেসি পলিসি( Privacy policy) সম্পর্কে।

Report or suggest about this page

Copyright 2016-2018 by websschool.com, All Rights Reserved.