معرفی و آموزش HTML5 | قسمت چهارم : آموزش نحوه استفاده از استایل های html5 و قرار داد های کد نویسی
معرفی و آموزش HTML5 | قسمت چهارم : آموزش نحوه استفاده از استایل های html5 و قرارداد های کد نویسی
در قسمت چهارم از سری مقالات آموزش html5 قصد داریم شما را با کنوانسیون های کد نویسی و نحوه استفاده از استایل های html5 آشنا کنیم. بسیاری از توسعه دهندگان و افرادی که در طراحی وب فعالیت می کنند از قرار داد های کد نویسی آگاهی ندارند و همین طور در مورد کد نویسی نحوی و استایل های استفاده شده در html اطلاعات کافی ندارند.(توصیه می شود دوره آموزشی طراحی سایت و پکیج آموزش طراحی سایت را مشاهده کنید)
در بین سال های ۲۰۰۰ تا ۲۰۱۰ بسیاری از توسعه دهندگان از html به xhtml کوچ کردند. در xhtml کاربران مجبور بودند تا کد های مجاز و با فرم مرتب بنویسند. اما زمانی که html5 ارائه شد این امکان برای طراحان به وجود آمد تا کمی شلخته تر و نا مرتب تر کد نویسی کنند و قوانین دست و پا گیر کمتر شد.
در این جا ما می خواهیم به شما آموزش دهیم که چگونه از استایل های html5 استفاده کنید تا کد نویسی مرتبی داشته باشید و قرار داد های کد نویسی را به خوبی رعایت کنید.
آموزش پیشنهادی برای شما : آموزش کامل HTML و HTML5
راهنمای استفاده از استایل های html5
شما به عنوان یک توسعه دهنده وب باید باهوش و آینده نگر باشید. استفاده همیشگی از استایل های html5 متن html شما را قابل درک تر می کند. این مرتب نویسی علاوه بر این که به شما کمک می کند مزیت دیگری نیز دارد و آن آینده نگری است. شاید در آینده برنامه ها ای که xml را می خوانند از html نیز پشتیبانی کنند. کد نویسی مرتب و نزدیک به حالت xhtml می تواند سبب شود که فایل های html شما به راحتی در این برنامه ها اجرا شوند. پس اولین نکته در استفاده از استایل های html5 این است که کد خود را مرتب، تمیز و با شکل دهی مناسب بنویسید.
انتخاب کردن نوع سند
همواره نوع سند خود را در اولین خط از کد نویسی مشخص کنید. برای html5 باید از کد زیر استفاده کنید:
<!DOCTYPE html>
از حروف کوچک برای نوشتن نام عناصر خود استفاده کنید
یکی دیگر از نکاتی که در استفاده از استایل های html5 باید آن را رعایت کنید این است که باید همواره از حروف کوچک برای نام عناصر استفاده شود. البته html5 این امکان را فراهم کرده است تا از حروف کوچک و بزرگ برای نوشتن نام عناصر استفاده کنید، اما ما به دلایل زیر به شما توصیه می کنیم از حروف کوچک برای این کار استفاده کنید:
- استفاده از حروف کوچک و بزرگ به صورت همزمان درست نیست
- در xhtml توسعه دهندگان به طور نرمال از حروف کوچک استفاده می کنند
- حروف کوچک ظاهر تمیزتری به متن شما می دهد
- نوشتن حروف کوچک راحت تر است.
همه عناصر html را ببندید
در html5 شما مجبور نیستید عناصر خود را ببندید. اما یکی از نکاتی که باید در استفاده از استایل های html5 رعایت کنید این است که حتما عناصر خود را ببندید. این کار با گذاشتن عنصر پایان دهنده انجام می شود مانند مثال زیر:
|
1 2 3 4 |
<section> <p>This is a paragraph.</p> <p>This is a paragraph.</p> </section> |
عناصر خالی را هم باید ببندید. زیرا در xhtml شما باید از عنصر پایان دهنده استفاده کنید.
|
1 |
<meta charset="utf-8" /> |
حتما از نقل قول برای مقدار های ویژگی ها استفاده کنید.
در html5 شما می توانید بدون نقل قول هم مقدار های ویژگی ها را مشخص کنید. مانند :
<table class=striped>
اما در استفاده از استایل های html5 توصیه می شود حتما از نقل قول استفاده کنید. دلیل این توصیه این است که :
- مقدار های نقل قول شده راحت تر خوانده می شوند
- و همچنین باید از نقل قول استفاده کنید تا بتوانید از فاصله در مقدارهای خود استفاده کنید. اگر نقل قول نباشد ایجاد فاصله سبب می شود کد شما خوانده نشود
به مثال زیر دقت کنید
|
1 |
<table class="striped"> |
برای تصاویر خود ویژگی تعیین کنید
یکی از نکات استفاده از استایل های html5 این است که تصویر شما حتما داری ویژگی alt باشد. دلیل این اهمیت این است که از عدم نمایش تصویر شما به دلایل مختلف جلوگیر می کند. علاوه بر این باید تصاویر شما دارای طول و عرض مشخص باشند. این کار سرعت بارگذاری صفحات شما را افزایش می دهد و مرورگر ها می توانند قبل از بارگذاری تصاویر میزان فضای لازم برای هر تصویر را مشخص کنند. به یک مثال خوب توجه کنید.
|
1 |
<img src="html5.gif" alt="HTML5" style="width:128px;height:128px"> |
از فاصله در اطراف علامت مساوی استفاده نکنید
باز هم در html5 این امکان به شما داده می شود تا کمی شلخته بنویسید! شما می توانید در اطراف مساوی از فاصله استفاده کنید ولی ما پیشنهاد می کنیم این کار را انجام ندهید، زیرا خواندن و گروه بندی کردن کد های بدون فاصله راحت تر انجام می شود.
از نوشتن خط های طولانی در کد نویسی بپرهیزید
یکی از قوانین استفاده از استایل های html5 و کد نویسی این است که از نوشتن خط های طولانی پرهیز کنید. زمانی که از یک ویرایشگر html استفاده می کنید، به شما اجازه نمی دهد تا به سمت چپ یا راست اسکرول کنید. و در واقع از شما می خواهد خط های خود را طولانی تر از ۸۰ کاراکتر نکنید.
از خطوط استفاده نکنید
طبق قوانین کد نویسی بهتر است بدون دلیل از خط خالی در کد نویسی استفاده نکنید. برای بهتر خوانده شدن کد ها از خط های خالی فقط برای جدا کردن بلوک های بزرگ کد استفاده کنید. همچنین از کلید tab کمتر استفاده کنید. لازم نیست در استفاده از استایل های html5 برای جدا سازی هر عنصر از خط خالی استفاده کنید. این خط های خالی سرعت خوانده شدن کد ها را کاهش می دهد. به دو مثال بد و خوب زیر توجه کنید.
مثال بد:
|
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> |
Table Example:
|
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> |
List Example:
|
1 2 3 4 5 |
<ol> <li>London</li> <li>Paris</li> <li>Tokyo</li> </ol> |
کلام آخر
استفاده از استایل های html5 و قوانین کد نویسی سبب می شود شما در کار خود حرفه ای شد. ما در این جا به قوانین معمول در کد نویسی اشاره کردیم، شما نیز می توانید استایل های مهم دیگر کد نویسی را به ما معرفی کنید و تجربیات خود را با ما در ارتباط بگذارید. در این جا پایان قسمت چهارم آموزش html5 را اعلام می کنیم. منتظر قسمت آخر این سری از مقالات باشید.
منبع : طراحی سایت
