این وب سایت با تمامی محتویات و دامین به فروش می رسد. لطفا جهت خریداری از طریق بخش ارتباط با ما در تماس باشید

جستجو ...


آموزش HTML5؛ نحوه استایل دادن و قواعد کدنویسی در HTML5
هدف ما این است که شما را در بالاترین سطح برنامه نویسی و توسعه وب سایت باشید.

ثبت نام کنید

در این قسمت از سری مقالات آموزش HTML5 به آموزش نحوه استایل دادن و قواعد کدنویسی در HTML5 می‌پردازیم.


نسخه پنجم HTML دارای استانداردهای مشخص شده‌ای است که برنامه‌نویسان باید کدهای خود را طبق آن‌ها بنویسند و به عناصر صفحات خود طبق استانداردهای HTML5 استایل بدهند. در این مقاله قصد داریم به آموزش نحوه استایل دادن و قواعد کدنویسی در HTML5 بپردازیم.

بیشتر بخوانید:

HTML چیست و چه کاربردی دارد؟

آموزش HTML مقدماتی

قواعد کدنویسی در HTML5

ما برنامه‌نویسان اغلب در مورد سبک کدنویسی و نحوه نگارش (سینتکس) مورد استفاده در HTML خیلی مطمئن نیستیم. بین سال‌های ۲۰۰۰ تا ۲۰۱۰، بسیاری از برنامه‌نویسان وب از HTML به XTML کوچ کردند. برنامه‌نویسانی که از XHTML استفاده می‌کردند باید کدهای معتبر، منظم و تمیز می‌نوشتند. اما در مورد HTML5 قدری متفاوت است و قواعد کدنویسی و کدهای معتبر در آن از قوانین متفاوتی پیروی می‌کنند.

استفاده مداوم از استایل‌ها باعث می‌شود دیگران راحت‌تر کدهای HTML شما را درک کنند. در آینده، شاید برنامه‌هایی مانند XML reader بخواهند کدهای HTML شما را بخوانند. استفاده از یک کد تمیز و مشابه با نحوه نگارش XHTML، اقدامی هوشمندانه محسوب می‌شود. همیشه کدهای خود را تمیز، مرتب و سازمان‌یافته بنویسید.

از Doctype مناسب استفاده کنید

همیشه نوع سند (doctype) را به عنوان اولین خط از سند خود در نظر بگیرید:

<!DOCTYPE html>

اگر می‌خواهید نوشته شما با تگ‌هایی که با حروف کوچک نوشته‌اید متناسب باشد می‌توانید از روش زیر استفاده کنید:

<!doctype html>

نوشتن نام عناصر با حروف کوچک

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

- نامناسب بودن نام‌های متشکل از ترکیب حروف کوچک و بزرگ

- برنامه‌نویسان معمولا از نام‌هایی با حروف کوچک استفاده می‌کنند (مانند XHTML)

- حروف کوچک ظاهر مرتب‌تری دارند

- نوشتن حروف کوچک آسان‌تر است

نوشتن به طریق زیر زیبا نیست:

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

نوشتن به این طریق بسیار زشت و نامرتب است:

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

نوشتن به این طریق خوب و مرتب است:

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

تمام عناصر HTML را ببندید

در HTML5 مجبور نیستید همه عناصر را ببندید (برای مثال عنصر <p>). اما ما توصیه می‌کنیم برای تمام عناصر در HTML یک تگ پایانی قرار داده و آن را ببندید.

نوشتن به این روش مناسب نیست:

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

عناصر خالی HTML را ببندید

در HTML5، بستن عناصر خالی کاملا اختیاری است و نوشتن به هر دو طریق زیر کاملا مجاز است:

<meta charset="utf-8">

 

<meta charset="utf-8" />

البته، اسلش پایانی در XHTML و XML حتما باید گذاشته شود. اگر پیش‌بینی می‌کنید نرم‌افزار XML به صفحه شما دسترسی داشته باشد، بهتر است اسلش پایانی را بگذارید.

نام خصوصیات را با حروف کوچک بنویسید

در HTML5 نوشتن نام خصوصیات با ترکیبی از حروف کوچک و بزرگ مجاز است. اما ما توصیه می‌کنیم بنا بر دلایل زیر، نام خصوصیات را با حروف کوچک بنویسید:

- نامناسب بودن نام‌های متشکل از ترکیب حروف کوچک و بزرگ

- برنامه‌نویسان معمولا از نام‌هایی با حروف کوچک استفاده می‌کنند (مانند XHTML)

- حروف کوچک ظاهر مرتب‌تری دارند

- نوشتن حروف کوچک آسان‌تر است

نوشتن به این روش نامناسب:

<div CLASS="menu">

و به این روش مناسب است:

<div class="menu">

مقدار خصوصیت را در علامت نقل قول قرار دهید

در HTML5 امکان نوشتن مقدار خصوصیت بدون علامت نقل قول وجود دارد. اما ما توصیه می‌کنیم بنا بر دلایل زیر، مقدار خصوصیت را در نقل قول قرار دهید:

- خوانایی مقادیری که در علامت نقل قول قرار دارند بیشتر است

- اگر مقدار شما حاوی فضای خالی باشد حتما باید از علامت نقل قول استفاده کنید.

نوشتن به این روش اصلا مناسب نیست چون مقدار حاوی فضای خالی است:

<table class=table striped>

این روش هم نامناسب است:

<table class=striped>

نوشتن به این روش کاملا مطلوب است:

<table class="striped">

خصوصیات مربوط به تصویر

همیشه خصوصیت “alt” را به تصاویر اضافه کنید. این خصوصیت زمانی اهمیت می‌یابد که تصویر بنا به هر دلیلی نمایش داده نمی‌شود. همچنین، همیشه طول و عرض تصویر را مشخص کنید. این کار باعث کاهش لرزش تصویر می‌شود چون مرورگر نمی‌تواند قبل از بارگذاری، فضای خالی برای تصویر نگه دارد.

روش نامناسب:

<img src="html5.gif">

روش مناسب:

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

 علامت مساوی و فضای خالی اطراف آن

HTML5 امکان قرار دادن فضای خالی در اطراف علامت مساوی را می‌دهد. اما هرچه این فضاهای خالی کمتر باشد، خواندن کدها آسان‌تر و موجودیت‌ها بهتر در کنار هم قرار می‌گیرند.

روش نامناسب:

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

نمونه فهرست:

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

حذف <html> و <body>

در استاندارد HTML5، تگ <html> و تگ <body> را می‌توان حذف کرد. کد زیر در HTML5 معتبر است:

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

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

ما حذف این تگ‌ها را توصیه نمی‌کنیم. عنصر <html> ریشه سند و محل مناسب برای مشخص کردن زبان صفحه است:

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

مشخص کردن زبان برای افزایش دسترسی اپلیکیشن‌ها (صفحه خوان‌ها) و موتورهای جستجو بسیار اهمیت دارد. حذف <html> یا <body> می‌تواند باعث خطا در DOM و نرم‌افزار XML و حذف <body> می‌تواند باعث ایجاد خطا در مرورگرهای قدیمی شود.

حذف <head>

در استاندارد HTML5، تگ <head> را هم می‌توان حذف کرد. به صورت پیش‌فرض، مرورگرها تمام عناصر قبل از <body>  را به یک عنصر پیش‌فرض <head> اضافه می‌کنند. شما می‌توانید با حذف تگ <head>، پیچیدگی HTML را کاهش دهید:

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

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

</html>

ما توصیه نمی‌کنیم که تگ <head> را حذف کنید چون حذف تگ برای مرورگرها ناشناخته است و مدتی زمان می‌برد تا این کار به عنوان یک سبک رایج شناخته شود.

متا دیتا

استفاده از عنصر <title> در HTML5 ضروری است. تا جایی که امکان دارد عنوان را با معنا انتخاب کنید:

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

برای اطمینان از ترجمه مناسب و ایندکس صحیح توسط موتورهای جستجو، زبان و charset باید در ابتدای سند مشخص شوند:

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

تنظیم Viewport

HTML5 روشی را معرفی کرد که به طراحان وب امکان کنترل viewport را از طریق تگ <meta> می‌دهد. Viewport ناحیه‌ی قابل رویت از صفحه وب‌سایت برای کاربر است و در دستگاه‌های مختلف اندازه‌های متفاوتی داشته در صفحات موبایل کوچک‌تر از صفحه کامپیوتر خواهد بود. شما باید عنصر <meta> زیر را در تمام صفحات وب‌سایت خود قرار دهید:

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

عنصر <meta> viewport به مرورگر دستورالعمل می‌دهد که چگونه روی ابعاد و اندازه‌های صفحه کنترل داشته باشد. بخش width=device-width مشخص می‌کند که عرض صفحه از screen-width دستگاه (که در دستگاه‌های مختلف تفاوت دارد) پیروی کند. بخش initial-scale=1.0 سطح زوم اولیه را در زمان بارگذاری صفحه توسط مرورگر مشخص می‌کند. در اینجا مثالی از یک صفحه بدون متا تگ viewport و همان صفحه را با متا تگ viewport مشاهده می‌کنید:

قواعد کدنویسی در HTML5

کامنت های 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.
-->

اگر در ابتدای خط دو فاصله بگذاریم، مشاهده کامنت‌های طولانی آسان‌تر خواهد شد.

شیوه نامه

از یک سینتکس ساده برای ارتباط با شیوه‌نامه‌ها (style sheet) استفاده کنید (استفاده از خصوصیت type لازم نیست):

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

-  کروشه آغازین را در همان خط سلکتور قرار دهید

- قبل از گذاشتن کروشه آغازین یک فاصله بگذارید

- بعد از هر جفت مقدار- خصوصیت از علامت (؛) استفاده کنید که شامل جفت آخر هم می‌شود

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

- کروشه پایانی را بدون هیچ فاصله‌ای در قبل از آن، در خط جدید قرار دهید

- از نوشتن خطوطی که بیش از ۸۰ کاراکتر دارند اجتناب کنید

بارگذاری جاوا اسکریپت در HTML

از یک سینتکس ساده برای بارگذاری کدهای جاوا اسکریپت خارجی استفاده کنید (استفاده از خصوصیت type ضروری نیست):

<script src="myscript.js">

دسترسی به عناصر HTML با جاوا اسکریپت

یکی از پیامدهای استفاده از استایل‌های نامنظم در HTML، ایجاد خطاهای جاوا اسکریپتی است. این دو تکه کد جاوا اسکریپت باعث ایجاد نتایج متفاوتی خواهند شد:

var obj = getElementById("Demo")

var obj = getElementById("demo")

استفاده از حروف کوچک برای نام گذاری فایل ها

برخی از وب سرورها (Apache، Unix) نسبت به بزرگی یا کوچکی حروف تشکیل‌دهنده نام فایل‌ها حساس هستند: فایلی که “london.jpg” نام دارد با “London.jpg” قابل دسترس نخواهد بود. سایر وب‌ سرورها (Microsoft، IIS) دارای این حساسیت نبوده و فایلی با نام “london.jpg” را می‌توان با نوشتن نام به صورت “London.jpg” هم قابل دسترسی خواهد بود.

اگر از ترکیبی از حروف کوچک و بزرگ استفاده می‌کنید، باید بسیار مراقب باشید. در صورتی که وب‌سایت خود را از یک سرور غیرحساس به یک سرور حساس به کوچکی و بزرگی حروف منتقل کنید، حتی خطاهای کوچک هم وب‌سایت شما را تخریب خواهد کرد. برای اجتناب از این مشکلات، همیشه از حروف کوچک برای فایل‌های خود استفاده کنید.

پسوند فایل

- فایل‌های HTML باید دارای پسوند .html یا .htm باشند. (هیچ تفاوتی میان این دو وجود ندارد)

- فایل‌های CSS باید دارای پسوند .css باشند

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

اگر می‌خواهید یک برنامه‌نویس حرفه‌ای باشید باید کدهایی تمیز و خوانا بنویسید که توسط سایر برنامه‌نویسان و موتورهای جستجو قابل درک باشند. پیروی از قواعد کدنویسی به شما در این منظور کمک کرده و از بروز خطا در وب‌سایت شما جلوگیری می‌کند. 

منبع :

متاسفانه فقط اعضای سایت قادر به ثبت دیدگاه هستند

برترین های