۲۰
مهر

جلسه ۴۲ : کد نویسی صحیح در html5

دسته‌بندی‌ها :

جزئیات
نوع محتواآموزش تصویری

فهرست

مقدمه

با عرض سلام خدمت کاربران سایت پی وی لرن . در مطالبی که تاکنون در بحث آشنایی با html5 ، ارائه شده است. با ویژگی ها و عناصر جدید html5 ، آشنا شدید، همچنین تا مباحثی نظیر مهاجرت از HTML4 به HTML5 نیز پیش رفتیم. تاکنون با ساختار کلی html5 و عناصر جدید این نسخه آشنایی لازم ارائه گردید. و چگونگی تبدیل یک صفحه وب نوع از HTML4 به HTML5 ، را نیز فرا گرفتید. اکنون در ادامه بحث html5 ، در این بخش ، قصد داریم برای آشنایی کاملتر شما با html5 ، موضوع راهنمای کد نویسی صحیح در html5 یا کد نویسی استاندارد در html5 ، را در این بخش ارائه دهیم.

راهنمای کد نویسی صحیح در html5

توسعه دهندگان وب اغلب در مورد style (سبک) و نحو کد گذاری برای استفاده در HTML روش مشخصی ندارند.

بین سالهای ۲۰۰۰ تا ۲۰۱۰ تعداد زیادی از توسعه دهندگان وب ، از HTML به XHTML ، مهاجرت کردند.

تا اینکه HTML5 ، ارائه شد.

هوشمند بودن و اثبات آینده

خواندن و استفاده از style و طراحی صفحه وب شما را برای دیگران آسانتر می کند.

در آینده ممکن است برنامه های XML، سعی کنند صفحه html شما را بخوانند.

نوع سند

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

مثال :

<!DOCTYPE html>

1	<!DOCTYPE html>

نام عناصر html را همیشه بصورت کوچک تایپ کنید:

نادرست:

مثال :

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

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

</SECTION>

بسیار بد :

مثال :

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

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

</SECTION>

قابل قبول:

مثال :

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

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

</section>

تمام تگ های html خود را ببندید

نادرست:

مثال :

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

<p>This is a paragraph.

</section>

صحیح:

مثال :

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

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

</section>

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

در HTML5 بستن عناصر خالی اختیاری است :

مثال :

<meta charset="utf-8">

1	<meta charset="utf-8">

مثال :

<meta charset="utf-8" />

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

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

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

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

مخلوط کردن نام های بزرگ و کوچک بد است.
توسعه دهندگان معمولا از نام های کوچک (از جمله XHTML استفاده می کنند).
حروف کوچکتر بهتر به چشم می آیند.
نوشتن حروف کوچکتر ساده تر است.

حالت ناردست:

مثال :

<div CLASS="menu">

1	<div CLASS="menu">

صحیح:

مثال :

<div class="menu">

1	<div class="menu">

مقادیر صفات را در داخل نقل قول (“”) تعریف کنید

HTML5 ف به شما اجازه می دهد که صفات را بدون نقل قول (“”) نیز تعریف کنید.

اما توصیه می شود که از نقل قول استفاده کنید. زیرا:

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

حالت بسیار بد:

مثال :

<table class=table striped>

1	<table class=table striped>

حالت بد و نادرست:

مثال :

<table class=striped>

1	<table class=striped>

حالت صحیح:

مثال :

<table class="striped">

1	<table class="striped">

صفات عکس ها

همییشه از صفت alt در عکس ها استفاده کنید. چراکه اگر به هر دلیلی عکس های وب سایت شما بارگزاری نشود و در مرورگر برای کاربران نمایش داده نشود. یک متن جایگزین به جای آن تصویر نمایش داده شود. همیشه ویژگی های width و height ر انیز در عکس ها استفاده کنید. این باعث می شود که تصویر وب سیات شما هنگام بارگزاری سو سو نزند.

حالت نادرست:

مثال :

<img src="html5.gif">

1	<img src="html5.gif">

صحیح:

مثال :

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

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

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

HTML5 اجازه می دهد بین صفات در عناصر از space استفاده کنید. اما توجه داشته باشید که space کمتر، باعث خوانایی بهتر می شود.

مثال- توصیه نمی شود:

مثال :

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

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

مثال ۲- خوب است و توصیه می شود:

مثال :

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

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

از خط کدهای طولانی اجتناب کنید

زمانیکه از ادیتور های html استفاده می کنید ،اگر خطوط کدها طولانی شود مجبورید که از scroll راست و چپ ، استفاده کنید.

سعی کنیئ که طول خط کدها را از ۸۰ کاراکتر کمتر کنید.

خط های خالی

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

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

مثالی از استفاده از خطوط خالی غیر ضروری:

مثال :

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

مثال ۲: اصلاح شده ی کد مثال قبل:

مثال :

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

<table>

<tr>

<th>Description</th>

</tr>

<tr>

<td>Description of A</td>

</tr>

<tr>

<td>Description of B</td>

</tr>

</table>

مثال لیست:

مثال :

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

<ol>

<li>London</li>

<li>Paris</li>

<li>Tokyo</li>

</ol>

حذف تگ های <html> و <body>؟

در HTML5 ، شما می توانید تگ های <html> و <body> را حذف کنید.

مثال:

مثال : حذف بخش های html و body

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

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

<!DOCTYPE html>

<head>

<title>Page Title</title>

</head>

<h1>This is a heading</h1>

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

خودتان امتحان کنید »

با این وجود توصیه می شود که تگ های <html> و <body> را ار کد html حذف نکنید.

حذف تگ <head>

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

HTML5 به شما اجازه می دهد که عنصر <head> ، را نیز حذف کنید.

مثال:

مثال : حذف تگ head

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

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

</html>

<!DOCTYPE html>

<html>

<title>Page Title</title>

<body>

<h1>This is a heading</h1>

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

</body>

</html>

خودتان امتحان کنید »

با این وجود ، حذف عنصر <head> ، نیز توصیه نمی شود.

Meta Data

درج عنصر <title> در HTML5 ضروری است:

مثال :

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

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

برای اطمینان از تفسیر مناسب و درست کردن فهرست موتور جستجو، هر دو زبان و رمزگذاری کاراکتر باید در اسناد در اسرع وقت تعریف شوند:

مثال :

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

<!DOCTYPE html>

<head>

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

</head>

تنظیمات viewport

HTML5 به طراح وب اجاز می دهد که کنترل کاملی روی viewport ها داشته باشد. این قابلیت ، از طریق تگ <meta> امکانپذیر است.

در مطالب آموزشی قبلی اشاره ای داشتیم به ویژگی responsive ، و توضیحاتی در مورد اعمال این ویژگی بوسیله تگ <meta> ، دادیم.

مثال:

مثال :

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

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

توضیحات در HTML

توضیحات کوتاه در یک خط و به صورت زیر نوشته می شود :

مثال :

<!-- This is a comment -->

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

<!--

This is a long comment example. This is a long comment example.

-->

صفحات Style

از سینتکس ساده ی زیر برای لینک شدن به صفحات style استفاده کنید :

مثال :

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

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

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

مثال :

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

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

همچنین می توان کدهای چندگانه را در چند خط نوشت:

مثال :

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

body {

background-color: lightgrey;

font-family: "Arial Black", Helvetica, sans-serif;

font-size: 16em;

color: black;

}

براکت باز را در همان خط اول انتخابگر قرار دهید.
قبل از باز کردن براکت از یک فضای خالی استفاده کنید.
از کد نویسی دندانه ای استفاده كنيد.
بعد از هر مقدار و انتهای کدها، از semicolon استفاده کنید.
اگر مقدار شامل فضاهای خالی باشد، فقط نقل قول ها (کوتیشن) در اطراف مقادیر استفاده می شود.
بستن براکت ها را بر روی یک خط جدید قرار دهید.
اجتناب از خطوط بیش از ۸۰ کاراکتر.

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

از سینتکس ساده ی زیر برای بارگذاری اسکریپت ها در HTML استفاده کنید :

مثال :

<script src="myscript.js">

1	<script src="myscript.js">

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

یک نتیجه از استفاده از استایل های HTML غیرمتعارف می تواند خطاهای جاوا اسکریپت باشد.

این دو عبارت جاوا اسکریپت نتایج مختلفی تولید خواهند کرد:

مثال : مثال کد JS

var obj = getElementById("Demo")

var obj = getElementById("demo")

var obj = getElementById("Demo")

var obj = getElementById("demo")

خودتان امتحان کنید »

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

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

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

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

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

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

پسوند فایل ها

فایل های HTML باید یک پسوند html. یا htm. داشته باشند.

فایل های CSS باید یک پسوند css داشته باشند.

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

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

هیچ تفاوتی میان افزونه های htm. و html. وجود ندارد. هر دو به عنوان HTML توسط هر مرورگر وب یا سرور وب مورد استفاده قرار می گیرند.

تفاوت ها فرهنگی هستند:

htm. از سیستم های DOS اولیه است که در آن سیستم برنامه های افزودنی را به ۳ کاراکتر محدود می کند.

html. از سیستم عامل های یونیکس است که این محدودیت را نداشتند.

تفاوت های تکنیکی

هنگامی که یک URL نام فایل را مشخص نمی کند (مثل https://www.pvlearn.com/css)، سرور یک نام پرونده پیش فرض را باز می کند. نام پرونده های معمول پیش فرض index.html، index.htm، default.html و default.htm است.

اگر سرور شما فقط با نام index.html به عنوان پیشفرض نام فایل پیکربندی شود، فایل شما باید به نام index.html باشد، نه «index.htm.»

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

به هر حال، فرمت کامل فایلهای HTML، .html است و هیچ دلیلی برای استفاده از آن وجود ندارد.

کلام آخر

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

به اشتراک بگذارید

Responsive در html ,آشنایی با HTML5 ,ساختار کد در html5 ,عناصر جدید در html5 ,قالب کد نویسی در html5 ,کد نویسی صحیح در html5

دیدگاه کاربران

تعداد دیدگاه : 2

zahra
اسفند ۲۲, ۱۳۹۸
سلام وقت بخیر
من کدهایی مربوط به html5 در notepad++ مینویسم اما اجرا نمیشه..
ممنون میشم راهنماییم کنید
کد
“input type=”color
input type=”date”
پاسخ دادن
- پی وی لرن
  اسفند ۲۲, ۱۳۹۸
  سلام
  این کدها را باید برای ارسال داخل تگ form قرار دهید و در ابتدای همه کدها DOCTYPE را html قرار دهید.
  < !DOCTYPE html>
  پاسخ دادن

پی وی لرن – آموزش برنامه نویسی و طراحی وب سایت

دوره های آموزشی آکادمی پی وی لرن (پروژه محور و ویژه بازار کار)

جلسه ۴۲ : کد نویسی صحیح در html5

مقدمه

راهنمای کد نویسی صحیح در html5

هوشمند بودن و اثبات آینده

نوع سند

تمام تگ های html خود را ببندید

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

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

مقادیر صفات را در داخل نقل قول (“”) تعریف کنید

صفات عکس ها

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

از خط کدهای طولانی اجتناب کنید

خط های خالی

حذف تگ های <html> و <body>؟

حذف تگ <head>

Meta Data

تنظیمات viewport

توضیحات در HTML

صفحات Style

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

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

پسوند فایل ها

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

تفاوت های تکنیکی

کلام آخر

لیست مطالب دوره

آموزش HTML

فرم در HTML

HTML5

گرافیک در HTML

چند رسانه ای در html

APIs در HTML

مطالب ویژه

دسته های اصلی

برگه ها

بلاگ