konkuru
چهارشنبه 24 تیر 1394, 21:38 عصر
به نام حق تعالی.. اولین مقاله آریا وردپرس رو تقدیم میکنم خدمتتون. امیدوارم کمکی حتی کم به شما عزیزان کرده باشم.خیلی خب زیاد پر حرفی نمیکنم و میرم سراغ اصل موضوع.کدنویسای عزیز css یه چندین نکته هست که اگر اونارو رعایت کنیم کدنویسی اصولی تر و استاندارد تری رو خواهیم داشت.اگر این نکات رو در کدنویسی رعایت بفرمایید قابی با کدینگ استاندارد و اصولی کد شده تحویل مشتری خواهید داد.
۱-در html هر تگی را که باز می کنید باید حتما بسته شود. اگر تگی که باز می شود بسته نشود یک کدنویسی غیر اصولی رخ داده است.همچنین استفاده از id برای استفاده چندین بار از یک ویژگی ثابل استفاده نیست بلکه باید به جای id از class استفاده شود. مثلا :
کدنویسی غیر اصولی :
<p id="ariawp">ariawp include <strong>theme and article</strong></p>
<p id="ariawp">WordPress templates are beautiful Ariawp .
کدنویسی اصولی :
<p class="ariawp">ariawp include <strong>theme and article</strong></p>
<p class="ariawp">WordPress templates are beautiful Ariawp</p> 2- استفاده نا به جا از استایل دادن با class در برخی از عناصری که در کتابخانه وردپرس وجود دارند . مثلا :
کد نویسی غیر اصولی :
<span class="ariawp"><strong>welcome to</strong></span>
<br><br>
ariawp
<br><br>کدنویسی اصولی :
<h1>Welcome to<p>ariawp</p></h1>
3- برای اینکه که ما سازگار معنایی پیدا کند باید از <!DOCTYPE html> به درستی استفاده کنیم.مثلا:
کدنویسی غیر اصولی :
<html>
<h1>Hello World</h1>
<p>This is a web page.</p>
</html>
کدنویسی اصولی:
<!DOCTYPE html>
<html>
<head>
<title>Hello World</title>
</head>
<body>
<h1>Hello World</h1>
<p>This is a web page.</p>
</body>
</html>
4 – استفاده نکردن از حروف upercase و در قبال آن همه حروف استفاده شده باید lowercase باشند . منظور از upercase حروف بزرگ و منظور از lowercase حروف کوچک می باشد. مثلا:
کدنویسی غیر اصولی :
<Aside>
<h3>Chicago</h3>
<H5 HIDDEN='HIDDEN'>City in Illinois</H5>
<img src=chicago.jpg alt="Chicago, the third most populous city in the United States" />
<ul>
<li>234 square miles</li>
<li>2.715 million residents</li>
</ul>
</ASIDE> کدنویسی اصولی :
<aside>
<h3>Chicago</h3>
<h5 hidden>City in Illinois</h5>
<img src="chicago.jpg" alt="Chicago, the third most populous city in the United States">
<ul>
<li>234 square miles</li>
<li>2.715 million residents</li>
</ul>
</aside> 5- استفاده از نام های مربوط به محتوا در class و id هایی که استفاده می کنیم. مثلا :
کدنویسی غیراصولی :
کد:
<p class="red">Error! Please try again.</p>
کدنویسی اصولی : کد:
<p class="alert">Error! Please try again.</p>
در اینجا نام red مربوط به محتوای داخل class نیست و بایستی از alert برای نام آن class استفاده کرد.
6- استفاده از ویژگی alt برای تصاویر(alt مناسب هم بهتر از با توجه به محتوای آن تصویر داده شود.) .مثلا:
کدنویسی غیر اصولی :
کد:
<img src="puppy.jpg">
کدنویسی اصولی :
کد:
<img src="puppy.jpg" alt="A beautiful, two-year-old hound mix puppy">
7- ندادن استایل در خود html و استفاده از class یا id و استایل دادن در css . مثلا :
کدنویسی غیر اصولی :
کد:
<p style="color: #393; font-size: 24px;">Thank you!</p>
کدنویسی اصولی :
کد:
<p class="alert-success">Thank you!</p> 8- استفاده از عناصر ساختاری html در جای مناسب خود . مثلا :
کدنویسی غیر اصولی :
کد:
<div class="container">
<div class="article">
<div class="headline">Headlines Across the World</div>
</div>
</div>
کدنویسی اصولی :
کد:
<div class="container">
<article>
<h1>Headlines Across the World</h1>
</article>
</div> قسمت اول این آموزش در همین جا به پایان می رسد.
منبع : آریاوردپرس (http://go.shopkeeper.ir/?url=http%3A%2F%2Fwww.ariawp.ir%2F)
۱-در html هر تگی را که باز می کنید باید حتما بسته شود. اگر تگی که باز می شود بسته نشود یک کدنویسی غیر اصولی رخ داده است.همچنین استفاده از id برای استفاده چندین بار از یک ویژگی ثابل استفاده نیست بلکه باید به جای id از class استفاده شود. مثلا :
کدنویسی غیر اصولی :
<p id="ariawp">ariawp include <strong>theme and article</strong></p>
<p id="ariawp">WordPress templates are beautiful Ariawp .
کدنویسی اصولی :
<p class="ariawp">ariawp include <strong>theme and article</strong></p>
<p class="ariawp">WordPress templates are beautiful Ariawp</p> 2- استفاده نا به جا از استایل دادن با class در برخی از عناصری که در کتابخانه وردپرس وجود دارند . مثلا :
کد نویسی غیر اصولی :
<span class="ariawp"><strong>welcome to</strong></span>
<br><br>
ariawp
<br><br>کدنویسی اصولی :
<h1>Welcome to<p>ariawp</p></h1>
3- برای اینکه که ما سازگار معنایی پیدا کند باید از <!DOCTYPE html> به درستی استفاده کنیم.مثلا:
کدنویسی غیر اصولی :
<html>
<h1>Hello World</h1>
<p>This is a web page.</p>
</html>
کدنویسی اصولی:
<!DOCTYPE html>
<html>
<head>
<title>Hello World</title>
</head>
<body>
<h1>Hello World</h1>
<p>This is a web page.</p>
</body>
</html>
4 – استفاده نکردن از حروف upercase و در قبال آن همه حروف استفاده شده باید lowercase باشند . منظور از upercase حروف بزرگ و منظور از lowercase حروف کوچک می باشد. مثلا:
کدنویسی غیر اصولی :
<Aside>
<h3>Chicago</h3>
<H5 HIDDEN='HIDDEN'>City in Illinois</H5>
<img src=chicago.jpg alt="Chicago, the third most populous city in the United States" />
<ul>
<li>234 square miles</li>
<li>2.715 million residents</li>
</ul>
</ASIDE> کدنویسی اصولی :
<aside>
<h3>Chicago</h3>
<h5 hidden>City in Illinois</h5>
<img src="chicago.jpg" alt="Chicago, the third most populous city in the United States">
<ul>
<li>234 square miles</li>
<li>2.715 million residents</li>
</ul>
</aside> 5- استفاده از نام های مربوط به محتوا در class و id هایی که استفاده می کنیم. مثلا :
کدنویسی غیراصولی :
کد:
<p class="red">Error! Please try again.</p>
کدنویسی اصولی : کد:
<p class="alert">Error! Please try again.</p>
در اینجا نام red مربوط به محتوای داخل class نیست و بایستی از alert برای نام آن class استفاده کرد.
6- استفاده از ویژگی alt برای تصاویر(alt مناسب هم بهتر از با توجه به محتوای آن تصویر داده شود.) .مثلا:
کدنویسی غیر اصولی :
کد:
<img src="puppy.jpg">
کدنویسی اصولی :
کد:
<img src="puppy.jpg" alt="A beautiful, two-year-old hound mix puppy">
7- ندادن استایل در خود html و استفاده از class یا id و استایل دادن در css . مثلا :
کدنویسی غیر اصولی :
کد:
<p style="color: #393; font-size: 24px;">Thank you!</p>
کدنویسی اصولی :
کد:
<p class="alert-success">Thank you!</p> 8- استفاده از عناصر ساختاری html در جای مناسب خود . مثلا :
کدنویسی غیر اصولی :
کد:
<div class="container">
<div class="article">
<div class="headline">Headlines Across the World</div>
</div>
</div>
کدنویسی اصولی :
کد:
<div class="container">
<article>
<h1>Headlines Across the World</h1>
</article>
</div> قسمت اول این آموزش در همین جا به پایان می رسد.
منبع : آریاوردپرس (http://go.shopkeeper.ir/?url=http%3A%2F%2Fwww.ariawp.ir%2F)