با عرض سلام خدمت کاربران سایت پی وی لرن . در مطالبی که تاکنون در بحث آشنایی با html5 ، ارائه شده است. با ویژگی ها و عناصر جدید html5 ، آشنا شدید، همچنین تا مباحثی نظیر مهاجرت از HTML4 به HTML5 نیز پیش رفتیم. تاکنون با ساختار کلی html5 و عناصر جدید این نسخه آشنایی لازم ارائه گردید. و چگونگی تبدیل یک صفحه وب نوع از HTML4 به HTML5 ، را نیز فرا گرفتید. اکنون در ادامه بحث html5 ، در این بخش ، قصد داریم برای آشنایی کاملتر شما با html5 ، موضوع راهنمای کد نویسی صحیح در html5 یا کد نویسی استاندارد در html5 ، را در این بخش ارائه دهیم.
توسعه دهندگان وب اغلب در مورد style (سبک) و نحو کد گذاری برای استفاده در HTML روش مشخصی ندارند.
بین سالهای ۲۰۰۰ تا ۲۰۱۰ تعداد زیادی از توسعه دهندگان وب ، از HTML به XHTML ، مهاجرت کردند.
تا اینکه HTML5 ، ارائه شد.
خواندن و استفاده از style و طراحی صفحه وب شما را برای دیگران آسانتر می کند.
در آینده ممکن است برنامه های XML، سعی کنند صفحه html شما را بخوانند.
همیشه نوع سند را به عنوان خط اول در سند خود تایپ کنید:
1 | <!DOCTYPE html> |
نام عناصر html را همیشه بصورت کوچک تایپ کنید:
نادرست:
1 2 3 | <SECTION> <p>This is a paragraph.</p> </SECTION> |
بسیار بد :
1 2 3 | <Section> <p>This is a paragraph.</p> </SECTION> |
قابل قبول:
1 2 3 | <section> <p>This is a paragraph.</p> </section> |
نادرست:
1 2 3 4 | <section> <p>This is a paragraph. <p>This is a paragraph. </section> |
صحیح:
1 2 3 4 | <section> <p>This is a paragraph.</p> <p>This is a paragraph.</p> </section> |
در HTML5 بستن عناصر خالی اختیاری است :
1 | <meta charset="utf-8"> |
1 | <meta charset="utf-8" /> |
در HTML5 ، می توانید هم از حروف کوچک و هم از حروف بزرگ در تعریف صفات استفاده کنید.
اما توصیه می شود که از حروف کوچک استفاده کنید، زیرا:
حالت ناردست:
1 | <div CLASS="menu"> |
صحیح:
1 | <div class="menu"> |
HTML5 ف به شما اجازه می دهد که صفات را بدون نقل قول (“”) نیز تعریف کنید.
اما توصیه می شود که از نقل قول استفاده کنید. زیرا:
حالت بسیار بد:
1 | <table class=table striped> |
حالت بد و نادرست:
1 | <table class=striped> |
حالت صحیح:
1 | <table class="striped"> |
همییشه از صفت alt در عکس ها استفاده کنید. چراکه اگر به هر دلیلی عکس های وب سایت شما بارگزاری نشود و در مرورگر برای کاربران نمایش داده نشود. یک متن جایگزین به جای آن تصویر نمایش داده شود. همیشه ویژگی های width و height ر انیز در عکس ها استفاده کنید. این باعث می شود که تصویر وب سیات شما هنگام بارگزاری سو سو نزند.
حالت نادرست:
1 | <img src="html5.gif"> |
صحیح:
1 | img src="html5.gif" alt="HTML5" style="width:128px;height:128px"> |
HTML5 اجازه می دهد بین صفات در عناصر از space استفاده کنید. اما توجه داشته باشید که space کمتر، باعث خوانایی بهتر می شود.
مثال- توصیه نمی شود:
1 | <link rel = "stylesheet" href = "styles.css"> |
مثال ۲- خوب است و توصیه می شود:
1 | <link rel="stylesheet" href="styles.css"> |
زمانیکه از ادیتور های html استفاده می کنید ،اگر خطوط کدها طولانی شود مجبورید که از scroll راست و چپ ، استفاده کنید.
سعی کنیئ که طول خط کدها را از ۸۰ کاراکتر کمتر کنید.
سعی کنید بدون دلیل ، خط های خالی را به کد اضافه نکنید.
سعی کنید از خطوط خالی برای جداسازی بلوک های کد بزرگ استفاده کنید.
مثالی از استفاده از خطوط خالی غیر ضروری:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <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> |
مثال ۲: اصلاح شده ی کد مثال قبل:
1 2 3 4 5 6 7 8 9 10 11 | <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> |
مثال جدول:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <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> |
مثال لیست:
1 2 3 4 5 | <ol> <li>London</li> <li>Paris</li> <li>Tokyo</li> </ol> |
در HTML5 ، شما می توانید تگ های <html> و <body> را حذف کنید.
مثال:
1 2 3 4 5 6 7 | <!DOCTYPE html> <head> <title>Page Title</title> </head> <h1>This is a heading</h1> <p>This is a paragraph.</p> |
با این وجود توصیه می شود که تگ های <html> و <body> را ار کد html حذف نکنید.
در حالت پیش فرض مرورگر ، تمام عناصر قبل از تگ <body> ، را به عنصر <head> اضافه می کند.
HTML5 به شما اجازه می دهد که عنصر <head> ، را نیز حذف کنید.
مثال:
1 2 3 4 5 6 7 8 9 10 | <!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 ضروری است:
1 | <title>HTML5 Syntax and Coding Style</title> |
برای اطمینان از تفسیر مناسب و درست کردن فهرست موتور جستجو، هر دو زبان و رمزگذاری کاراکتر باید در اسناد در اسرع وقت تعریف شوند:
1 2 3 4 5 6 | <!DOCTYPE html> <html lang="en-US"> <head> <meta charset="UTF-8"> <title>HTML5 Syntax and Coding Style</title> </head> |
HTML5 به طراح وب اجاز می دهد که کنترل کاملی روی viewport ها داشته باشد. این قابلیت ، از طریق تگ <meta> امکانپذیر است.
در مطالب آموزشی قبلی اشاره ای داشتیم به ویژگی responsive ، و توضیحاتی در مورد اعمال این ویژگی بوسیله تگ <meta> ، دادیم.
مثال:
1 | <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
توضیحات کوتاه در یک خط و به صورت زیر نوشته می شود :
1 | <!-- This is a comment --> |
توضیحات بیشتر از یک خط نیز به صورت زیر خواهد بود :
1 2 3 4 | <!-- 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 استفاده کنید :
1 | <link rel="stylesheet" href="styles.css"> |
قوانین کوتاه می توانند فشرده شوند مانند این:
1 | p.intro {font-family: Verdana; font-size: 16em;} |
همچنین می توان کدهای چندگانه را در چند خط نوشت:
1 2 3 4 5 6 | body { background-color: lightgrey; font-family: "Arial Black", Helvetica, sans-serif; font-size: 16em; color: black; } |
براکت باز را در همان خط اول انتخابگر قرار دهید.
قبل از باز کردن براکت از یک فضای خالی استفاده کنید.
از کد نویسی دندانه ای استفاده كنيد.
بعد از هر مقدار و انتهای کدها، از semicolon استفاده کنید.
اگر مقدار شامل فضاهای خالی باشد، فقط نقل قول ها (کوتیشن) در اطراف مقادیر استفاده می شود.
بستن براکت ها را بر روی یک خط جدید قرار دهید.
اجتناب از خطوط بیش از ۸۰ کاراکتر.
از سینتکس ساده ی زیر برای بارگذاری اسکریپت ها در HTML استفاده کنید :
1 | <script src="myscript.js"> |
دسترسی به عناصر HTML با جاوا اسکریپت :
یک نتیجه از استفاده از استایل های HTML غیرمتعارف می تواند خطاهای جاوا اسکریپت باشد.
این دو عبارت جاوا اسکریپت نتایج مختلفی تولید خواهند کرد:
1 2 3 | 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. وجود ندارد. هر دو به عنوان 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 پرداختیم.
zahra
سلام وقت بخیر
من کدهایی مربوط به html5 در notepad++ مینویسم اما اجرا نمیشه..
ممنون میشم راهنماییم کنید
کد
“input type=”color
input type=”date”
پی وی لرن
سلام
این کدها را باید برای ارسال داخل تگ form قرار دهید و در ابتدای همه کدها DOCTYPE را html قرار دهید.
< !DOCTYPE html>