‎‎راهنماي سبك كدنويسيHTML Style Guide -‎

   <Next  
Previous >

‎يك كدنويسي تميز، مرتب وپايدار ميتواند آنرا براي مطالعه واستفاده ديگران ساده وقابل فهم تر ‎نمايد .براي استاندارد كردن روال كد نويسي در ادامه مواردي را بعنوان مطلوب ونامطلوب بيان ‎ميكنيم.

‎‎اعلام نوع سندAlways Declare Document Type -‎

‎هميشه نوع سند را در اولين خط برنامه مشخص كنيد .روش درست اعلام نوع سندHTML بصورت زير ‎است.

‎ 
<!DOCTYPE html>

‎‎نام عناصر با حروف كوچكUse Lowercase Element Names -‎

‎درHTML محدويتي براي نام عناصر با حروف كوچك ، بزرگ يا تركيب آنها وجود ندارد .يعني HTML‎نسبت به نام عناصر حساسيت حروفي ندارد . اما بدلايل زير پيشنهاد ميشود ازحروف كوچك ‎استفاده نمائيد.

‎‎خــوب:

‎ 
<body>
<p>This is a paragraph.</p>
</body>

‎‎بــد:

‎ 
<BODY>
<P>This is a paragraph.</P>
</BODY>

‎‎بستن همه عناصرClose All HTML Elements -‎

‎درHTML در استفاده از عناصر، لازم نيست همه آنها بسته شوند .مثلا عنصر ‎<p>‎ ‎ميتواند بدون‎</p>‎ استفاده شود .بااين حال قويا پشنهاد ميشود،كه آنها بسته ‎شوند.

‎‎خــوب:

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

‎‎بــد:

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

‎‎نام ويژگي با حروف كوچكUse Lowercase Attribute Names -‎

‎درHTML مجازهستيدكه براي نام ويژگي ها، ازتركيب حروف كوچك وبزرگ استفاده نمائيد .اما براي ‎بهبود كدنويسي پيشنهاد ميشود كه ازحروف كوچك استفاده نمائيد .دلايل استفاده از حروف كوچك ‎مطابق زيراست:

‎‎خــوب:

‎ 
<a href="https://www.w3schools.com/html/">Visit our HTML tutorial</a>

‎‎بــد:

‎ 
  <a HREF="https://www.w3schools.com/html/">Visit our HTML tutorial</a>

‎‎اعلام مقادير در نقل قولAlways Quote Attriobute Value -‎

‎درHTML ميتوان مقادير ويژگي هارا در نقل قول يا بدون آن اعلام كرد .اما بدلايل زير پيشنهاد ‎ميشود كه مقادير ويژگي ها در نقل قول اعلام شود:

‎‎خــوب:

‎ 
   <table class="striped">

‎‎بــد:

‎ 
   <table class=striped>

‎‎خيلي بــــد:

‎‎اين مورد كار نميكند، چون مقدار دارايspace است .

‎ 
<table class=table striped>

‎Always Sepcify alt,width,and height for Images‎

‎‎هميشه براي تصاويرمقاديرalt,width,height اعلام شود .

‎هميشه براي تصاوير مقدار‎alt‎ اعلام گردد .اين مقدار در صورت عدم نمايش تصوير ‎بهر دليلي جاي آن نمايش داده ميشود.

‎هميشه براي عنصر‎<img>‎ مقادير ويژگي هاي ‎width‎ و ‎height‎‎تعريف شود .اين امر باعث پيش گيري از سوسو زدن ميشود .

‎‎خــوب:

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

‎‎بــد:

‎ 
 <img src="html5.gif">

‎‎فضاي خالي وعلامت تساويSpaces ans Equal Signs -‎

HTML‎اجازه ميدهد كه اطراف علامت ‎"=‎"‎ ‎بلنك باشد، اما بدون فضاي خالي براي خواندن آسانتر بوده واجزاء با هم بهتر گروه بندي ‎ميشوند .يعني فاصله اجزاء كمتر ودر ديد نمايانترند.

‎‎خــوب:

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

‎‎بـــد:

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

‎‎خوداري ازخطوط طولانيAvoid Long Code Lines -‎

‎در اديتورها كه برنامه نوشته ميشود، براي خطوط طولاني ، بايد ازScroll جهت چپ و راست ‎،استفاده كرد،واين كار آساني نيست .در اين نوع وارد با توجه به محدوديت نماي ديد در اديتور ‎كاركردن مشكل خواهدبود .اما اگر دستور بلند در چند خط شكسته شود، مشكل برطرف خواهد شد.

‎‎خطوط خالي وتورفتگيBlank Lines and 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.</p>

<h2>London</h2>
<p>London is the capital city of England. It is the most populous city in the United Kingdom.</p>

<h2>Paris</h2>
<p>Paris is the capital of France. The Paris area is one of the largest population centers in Europe.</p>

‎‎بــد:

‎ 
<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.</p>
<h2>London</h2><p>London is the capital city of England. It is the most populous city in the United Kingdom.</p>
<h2>Paris</h2><p>Paris is the capital of France. The Paris area is one of the largest population centers in Europe.</p>
</body>

‎‎مثال خوب جدول

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

‎‎مثال ليست خوب

‎ 
<ul>
  <li>London</li>
  <li>Paris</li>
  <li>Tokyo</li>
</ul>

‎‎عنصرعنوان فراموش نشودNever Skip the <title> Element-‎

‎عنصر‎<title>‎ درHTML ضروريست .محتوي اين عنصردر صفحه براي موتور جستجو ‎،در بهينه نمودن جستجوبسياربا اهميت است .اين عنوان در الگوريتم جستجو مورد بررسي ‎تا در ليست نتيجه آن قرار گيرد.

‎‎محتوي عنصر‎<title>‎ در موارد زير مورداستفاده قرارميگيرد :

‎‎بنابراين باتوجه باهميت آن، آنرا دقيق ومعني داركنيد.

‎‎نمونه اي ازعنوان

‎ 
<title>HTML Style Guide and Coding Conventions</title>

‎‎حذف‎<html>‎ و‎<body>‎

‎‎مثال ـ درنمونه زير حذف دوعنصر فوق را ازريابي ميكنيم.

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

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

--(go to editor for change code and run)

‎بااينحال قويا توصيه ميشود كه دو عنصر‎<html>‎ و ‎<body>‎ ‎اضافه نمائيد.

‎حذف‎<body>‎ ميتواند در مرورگرهاي قديمتر ايجاد خطا كند.وحذف هردو آنها ‎باعث اختلال در نرم افزازهايDOM وXML شود .

‎‎حذف عنصرسرOmitting <head> -‎

‎عنصر‎<head>‎ رانيز ميتوان حذف كرد .در اين حالت مرورگر تمام عناصر قبل از ‎<body>‎‎را بعنوان پيش فرض ‎<head>‎ در نظر ميگيرد.

‎‎مثال ـ نمونه حذف عنصر‎<head>‎

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

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

</body>
</html>

--(go to editor for change code and run)

‎‎بااين حال توصيه ميشود كه آنرا حذف نكنيد.

‎‎بستن عناصر خاليClose Empty HTML Elements -‎

‎‎درHTML بستن عناصرخالي اختياريست .

‎‎نوع بازمجــاز:

‎ 
<meta charset="utf-8">

‎‎نوع بسته عنصرخالي همچنين مجــازاست.

‎ 
<meta charset="utf-8"/>

‎اگر انتظار دسترسي به صفحات را با نرم افزارXML/XHTML داريد، بستن عناصر خالي را رعايت كنيد ‎چون بستن اين عناصر براي آنها ضروريست.

‎‎اضافه نمودن ويژگي زبانAdd the Lang Attribute -‎

‎بايد هميشه ويژگي‎lang‎ را در داخل تگ‎<html>‎ قرار دهيد.معرفي ‎آن به مرورگرها وموتورجستجو كمك مي نمايد.

‎‎مثال ـ استفاده ويژگي زبان

‎ 
<!DOCTYPE html>
<html lang="en-us">
<head>
  <title>Page Title</title>
</head>
<body>

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

</body>
</html>

--(go to editor for change code and run)

‎‎فراداده ايMeta Data -‎

‎جهت تفسير مناسب ونمايه سازي صحيح موتور جستجو، ويژگي زبان و همچنين مجموعه كراكتري بايد ‎در نزديك تري خطوط صفحهHTML معرفي شوند . مطابق نمونه زير:

‎ 
<!DOCTYPE html>
<html lang="en-us">
<head>
  <meta charset="UTF-8">
  <title>Page Title</title>
</head>

‎‎تنظيم نماي ديدSetting The Viewport -‎

‎نماي ديد‎"viewport‎"‎كاربر شامل آنچه قابل مشاهده است مينامند .اين نما در دستگاهاي مختلف ‎نمايشي لب تاب، موبايل وتبلت متفاوت است .براي مشاهده درست صفحه در نماي ديد مختلف دستور ‎<meta>‎‎بايد در تمام صفحات وب قرار گيرد

‎ 
<meta name="viewport" content="width-drevice-width,initail-scale=1.0">

‎‎اين دستور به مرورگر روشهائي در مورد نحوه كنترل ابعاد ومقياس صفحه نمايش را مشخص مينمايد.

‎مقدار‎width=device-‎width‎ مشخص ميكند كه عرض صفحه نمايش را با عرض ‎دستگاه تنظيم نمايد، كه متفاوت ميباشد.

‎زمانيكه صفحه براي باراول توسط مرورگر بارگذاري ميشود، قسمت‎initail-‎scale=1.0‎ ‎سطح بزرگ نمائي اوليه را تعيين ميكند.

‎‎در زير نمونه از دو صفحه با متاتگ وبدون متاتگ آمده است.

‎

‎نكته ـ اگر با گوشي يا تبلت اين صفحه رامرور ميكنيد، ميتوانيد روي پيوند آنها كليك نمائيد و ‎تفاوت را ملاحظه كنيد.

Without the viewport meta tag:
With the viewport meta tag:

‎‎نظــراتHTML Comments -‎

‎‎متن كوتاهي را ميتوان در قالب نظرات مطابق زير نوشت

‎ 
<!-- this is a comment -->

‎‎در صورت طولاني بودن متن نظرات مطابق زير اقدام كنيد.

‎ 
<!--
  this is a long comment example
      this is a long comment example
   this is a long comment example
        this is a long comment example
-->

‎‎مشاهده نظرات طولاني در صورتيكه بادو فاصله تورفتگي باشد راحتراست.

‎‎استفاده از استايل شيت هاUsing Style Sheets -‎

‎از روش ساده پيوند براي استفاده از استايل شيت ها استفاده كنيد .ويژگي‎type‎ لازم ‎نيست.

‎‎نمونه استفاده از فايل‎"styles.css‎"‎مطابق زير

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

‎‎استايل شيت كوتاه را ميتوان بصورت فشرده نوشت مطابق زير:

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

‎‎استايل شيت هاي طولاني را بايد در چندين خط مطابق نمونه زيرنوشت:

‎ 
body {
  background-color: lightgrey;
  font-family: "Arial Black", Helvetica, sans-serif;
  font-size: 16em;
  color: black;
}

‎‎بارگذاري اسكريپت جاوLoading JavaScript in HTML -‎

‎‎روش ساده براي بارگذاري يك اسكريپت خارجي . نياز به اعلام‎type‎ نيست .

‎ 
<script src="myscript.js">

‎Accessing HTML Elements with JavaScript‎

‎‎دسترسي به عناصرHTML با جاوااسكريپت

‎استفاده نابجا از جاوااسكريت درHTML منجر به خطا ميشود .حتي ممكن پيغام خطا داده نشود ولي ‎نتجه دلخواه هم خاصل نميشود .درصورت عدم دقت اين مورد اتفاق خواهد افتاد وپيداكردن ايراد ورفع ‎اشكال نياز به تجربه دارد.

‎يكي از توابع كه در جاوااسكريپت براي دسترسي بعناصرHTML در صفحه استفاده ميشود ‎getElementById()‎‎‎است، كه درمورد زير استفاده شده است .

‎‎اين دوعبارت جاوااسكريپت نتايج مختلفي را ايجاد ميگنند.

‎ 
document.getElementById("demo").innerHTML = "HELLO.";

document.getElementById("demo").innerHTML = "HELLO.";

--(go to editor for change code and run)

‎نكته ـ از توابع جاوااسكريپت بهمان فرم تعريف شده آن بايد نام برد .مثلا تابع فوق اگر در حروف ‎كوچك وبرزگ تغيير داده شود، كار نميكند وخطائي هم دريافت نميكنيد.

‎‎فايلها باحروف كوچكUse Lower CaseFile names -‎

‎بعضي از وب سرور ها مثلApache ,Unix حاسيت حروفي نسبت به نام فايل دارند .بعنوان نمونه اگر ‎فايلي بانام‎"london.jpg‎"‎ذخيره شده باشد، نميتوان آنرا با نام‎"London.jpg‎"‎ دسترسي داشت.

‎‎اگر در نام فايلها از تركيب حروف بزرگ وكوچك استفاده ميكنيد، بايد مطلب فوق رادر نظر بگيريد.

‎اگر ازيك وب سرور غير حساس بحروف به سرور حساس برويد، همين موضوع كوچك شمارا بدرد سر ‎خواهد انداخت.

‎‎براي گريز از اين مشكل بايدهميشه براي نامها ازحروف كوچك استفاده كنيد.

‎‎پسوندفايلFile Extention -‎

‎پسوند فايلهايHTML بايد ‎".html‎"‎يا ‎".htm‎"‎باشند .فايلهاي CSS پسوند ‎".css‎"‎وجاوااسكريپت ‎فايلها، پسوند‎".js‎"‎

‎هيچ تفاوتي بين پسوندhtml وhtm نيست . هردوآنها توسطHTML ، ‎‎مرورگروب ووب سرور پشتيباني ميشوند.

Previous >    <Next