٪۴۰ تخفیف تابستانه شروع شد! بزرگترین حراج سال ما

به ما بپیوندید

آموزش کنوانسیون سبک راهنمای HTML و برنامه نویسی

یک کد HTML سازگار ، تمیز و مرتب ، خواندن و درک کد شما را برای دیگران آسان می کند. در اینجا چند راهنما و نکته برای ایجاد کد خوب HTML آورده شده است. همیشه نوع سند را اعلام کنید…

محمد یوسفی

30 ژوئن 2021

یک کد HTML سازگار ، تمیز و مرتب ، خواندن و درک کد شما را برای دیگران آسان می کند.

در اینجا چند راهنما و نکته برای ایجاد کد خوب HTML آورده شده است.


همیشه نوع سند را اعلام کنید

همیشه نوع سند را به عنوان اولین سطر در سند خود اعلام کنید.

نوع صحیح سند برای HTML:

<!DOCTYPE html>

از نام عناصر کوچک استفاده کنید

HTML اجازه می دهد حروف بزرگ و کوچک را در نام عناصر مخلوط کنید.

با این حال ، ما توصیه می کنیم از نام عناصر کوچک استفاده کنید ، زیرا:

  • مخلوط کردن حروف بزرگ و کوچک بد به نظر می رسد
  • توسعه دهندگان معمولاً از نام های کوچک استفاده می کنند
  • کوچک تر تمیزتر به نظر می رسد
  • نوشتن حروف کوچک آسان تر است

خوب:

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

بد:

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

بستن همه عناصر HTML

در HTML لازم نیست همه عناصر را ببندید (به عنوان مثال <p>عنصر).

با این حال ، ما اکیداً توصیه می کنیم همه عناصر HTML را ببندید ،

خوب:

<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>

از اسامی ویژگی کوچک استفاده کنید

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>

همیشه مقادیر صفت را نقل کنید

HTML اجازه می دهد مقادیر ویژگی بدون نقل قول باشد.

با این حال ، ما توصیه می کنیم مقادیر ویژگی را ذکر کنید ، زیرا:

  • توسعه دهندگان معمولاً مقادیر ویژگی را نقل می کنند
  • خواندن مقادیر نقل شده آسان تر است

اگر مقدار حاوی فاصله است ، باید از نقل قول استفاده کنید

خوب:

<table class="striped">

بد:

<table class=striped>

خیلی بد:

این کار نمی کند ، زیرا مقدار حاوی فضاها است:

<table class=table striped>

همیشه ارتفاع ، عرض و ارتفاع را برای تصاویر مشخص کنید

همیشه altویژگی را برای تصاویر مشخص کنید . این ویژگی در صورتی مهم است که تصویر به دلایلی قابل نمایش نباشد.

همچنین ، همیشه تصاویر widthو را تعریف heightکنید. این میزان سوسو زدن را کاهش می دهد ، زیرا مرورگر می تواند قبل از بارگیری فضای لازم را برای تصویر ذخیره کند.

خوب:

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

بد:

<img src="html5.gif">

فضاها و علائم برابر

HTML به فضاهای اطراف علائم برابر اجازه می دهد. اما خواندن فضای کم آسان تر است و نهادها را بهتر با هم گروه می کند.

خوب:

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

بد:

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

از خطوط طولانی کد خودداری کنید

هنگام استفاده از ویرایشگر HTML ، پیمایش به راست و چپ برای خواندن کد HTML آسان نیست.

سعی کنید از خطوط کد طولانی خودداری کنید.


خطوط خالی و تورفتگی

بدون دلیل خطوط ، فضاها یا تورفتگی های خالی اضافه نکنید.

برای خوانایی ، خطوط خالی را اضافه کنید تا بلوک های کد بزرگ یا منطقی را از هم جدا کنید.

برای خوانایی ، دو فاصله از تورفتگی اضافه کنید. از کلید tab استفاده نکنید.

خوب:

<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>

  <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>

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

<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>

هرگز از عنصر <title> رد نشوید

این <title>عنصر در HTML مورد نیاز است.

مطالب عنوان صفحه برای بهینه سازی موتور جستجو (SEO) بسیار مهم است! عنوان صفحه توسط الگوریتم های موتور جستجو برای تصمیم گیری در مورد ترتیب هنگام قرار دادن صفحات در نتایج جستجو استفاده می شود.

<title>عنصر:

  • عنوان را در نوار ابزار مرورگر تعریف می کند
  • وقتی صفحه به موارد دلخواه اضافه می شود عنوانی برای آن فراهم می کند
  • در نتایج موتور جستجو عنوان را برای صفحه نمایش می دهد

بنابراین ، سعی کنید عنوان را تا حد امکان دقیق و معنی دار کنید:

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

<html> و <body> را حذف می کنید؟

یک صفحه HTML بدون برچسب ها <html>و اعتبارسنجی می شود <body>:

مثال:

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

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

با این حال ، اکیداً توصیه می کنیم همیشه برچسب ها <html>و را اضافه <body>کنید!

حذف <body>می تواند باعث خطا در مرورگرهای قدیمی شود.

حذف <html>و <body> همچنین می تواند نرم افزار DOM و XML را خراب کند.


حذف <head>؟

برچسب HTML <head> نیز می تواند حذف شود.

مرورگرها همه عناصر را قبلاً <body>به یک <head> عنصر پیش فرض اضافه می کنند.

مثال:

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

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

</body>
</html>

با این حال ، توصیه می کنیم از <head>برچسب استفاده کنید .


عناصر HTML خالی بسته شود؟

در HTML ، بستن عناصر خالی اختیاری است.

مجاز:

<meta charset="utf-8">

همچنین مجاز است:

<meta charset="utf-8" />

اگر انتظار دارید که نرم افزار XML / XHTML به صفحه شما دسترسی پیدا کند ، برش (/) را حفظ کنید زیرا در XML و XHTML مورد نیاز است.


زبان را اضافه کنید

برای اعلام زبان صفحه وب ، باید همیشه 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>

متا داده

برای اطمینان از تفسیر مناسب و نمایه سازی صحیح موتور جستجو ، هر دو زبان و کدگذاری کاراکتر باید در اسرع وقت در یک سند HTML تعریف شوند:<meta charset="charset">

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

تنظیم Viewport

Viewport منطقه قابل مشاهده کاربر در یک صفحه وب است. در دستگاه متفاوت است – در تلفن همراه نسبت به صفحه رایانه کوچکتر خواهد بود.

شما باید <meta>عنصر زیر را در تمام صفحات وب خود قرار دهید:

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

این به مرورگر دستورالعمل نحوه کنترل ابعاد و مقیاس بندی صفحه را می دهد.

این width=device-widthقسمت عرض صفحه را برای دنبال کردن عرض صفحه دستگاه تنظیم می کند (که بسته به دستگاه متفاوت خواهد بود).

این initial-scale=1.0قسمت هنگام بارگیری صفحه برای اولین بار توسط مرورگر ، سطح بزرگنمایی اولیه را تنظیم می کند.

در اینجا مثالی از یک صفحه وب بدون متا برچسب viewport و همان صفحه وب با متا برچسب viewport وجود دارد:

نکته: اگر در حال مرور این صفحه با تلفن یا رایانه لوحی هستید ، می توانید روی دو پیوند زیر کلیک کنید تا تفاوت را ببینید.

بدون نشان متا viewport: با متا تگ viewport 

 

 

 

 

 

 

 

 

 

 

نظرات HTML

نظرات کوتاه باید روی یک خط بنویسند ، مانند این:

<!-- 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.
-->

مشاهده کامنت های طولانی اگر با دو فاصله فرورفتگی داشته باشند ، راحت تر مشاهده می شوند.


استفاده از Sheets Sheets

برای پیوند دادن به برگه های سبک از نحو ساده استفاده کنید ( typeویژگی لازم نیست):

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

قوانین کوتاه CSS را می توان فشرده نوشت ، مانند این:

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

قوانین طولانی CSS باید روی چندین خط نوشته شوند:

body {
  background-color: lightgrey;
  font-family: "Arial Black", Helvetica, sans-serif;
  font-size: 16em;
  color: black;
}
  • براکت باز را در همان خط انتخاب کنید
  • قبل از براکت باز از یک فاصله استفاده کنید
  • از دو فاصله تورفتگی استفاده کنید
  • بعد از هر جفت مقدار-ویژگی از جمله نقطه آخر استفاده کنید
  • فقط در صورت استفاده از مقدار از نقل قول ها ، مقادیر از آنها استفاده کنید
  • بدون در نظر گرفتن فضاهای جلو ، براکت بسته را روی یک خط جدید قرار دهید

JavaScript در HTML بارگیری می شود

برای بارگذاری اسکریپت های خارجی از نحو ساده استفاده کنید ( typeویژگی لازم نیست):

<script src="myscript.js">

دسترسی به عناصر HTML با JavaScript

استفاده از کد HTML “نامرتب” می تواند منجر به خطاهای JavaScript شود.

این دو عبارت JavaScript نتایج متفاوتی را ایجاد می کنند:

مثال

getElementById("Demo").innerHTML = "Hello";

getElementById("demo").innerHTML = "Hello";

از نام پرونده های کوچک استفاده کنید

برخی از سرورهای وب (Apache ، Unix) در مورد نام پرونده ها به حروف کوچک حساس هستند: “london.jpg” به عنوان “London.jpg” قابل دسترسی نیست.

وب سرورهای دیگر (مایکروسافت ، IIS) به حروف کوچک و بزرگ حساس نیستند: “london.jpg” به عنوان “London.jpg” قابل دسترسی است.

اگر از ترکیبی از حروف بزرگ و کوچک استفاده می کنید ، باید از این موضوع آگاه باشید.

اگر از یک سرور حساس به حروف کوچک به سرور بروید ، حتی خطاهای کوچک نیز وب شما را می شکند!

برای جلوگیری از این مشکلات ، همیشه از نام پرونده های کوچک استفاده کنید!


پسوندهای پرونده

پرونده های HTML باید پسوند html داشته باشند ( .htm مجاز است).

پرونده های CSS باید پسوند css داشته باشند .

پرونده های جاوا اسکریپت باید پسوند .js داشته باشند .


تفاوت بین .htm و .html؟

هیچ تفاوتی بین پسوندهای فایل .htm و .html وجود ندارد!

هر مرورگر وب و سرور وب به عنوان HTML رفتار می شود.


نامهای پیش فرض پرونده

هنگامی که یک URL یک نام پرونده را در انتها مشخص نمی کند (مانند “https://www.w3schools.com/”) ، سرور فقط یک نام پرونده پیش فرض مانند “index.html” ، “index.htm” ، “” اضافه می کند default.html “یا” default.htm “.

اگر سرور شما فقط با “index.html” به عنوان نام پرونده پیش فرض پیکربندی شده باشد ، پرونده شما باید “index.html” باشد و نه “default.html”.

با این حال ، سرورها می توانند با بیش از یک نام فایل پیش فرض پیکربندی شوند. معمولاً می توانید نام پرونده های پیش فرض دلخواه خود را تنظیم کنید.

منبع

مطالب مرتبط

0 0 رای ها
امتیازدهی به مقاله
اشتراک در
اطلاع از
guest
0 نظرات
بازخورد (Feedback) های اینلاین
مشاهده همه دیدگاه ها