
مشکلات رایج در کدنویسی معتبر و رفع آنها

همان طور که می دانیم، یکی از موارد در بهینه سازی صفحات وب برای موتورهای جستجو (SEO یا Search Engine Optimization) که رعایت آن از اهمیت بالایی نیز برخوردار است، معتبر بودن کدها از نظر سازگاری و تطابق با استانداردهای تعریف شده کنسرسیوم جهانی وب (W3C) است، مفهوم این عبارت این است که صفحات وب باید طبق اصول خاصی کدنویسی شوند و لذا ما به عنوان ایجادگر صفحه، مجاز به استفاده از تگ ها و شیوه های غیر استاندارد نیستیم، اگرچه ممکن است برخی صفحات هرچند با وجود خطاهای فراوان در کدنویسی همچنان قابل استفاده و به ظاهر بی نقص باشند، اما به یاد داشته باشیم وب امروز عرصه رقابت است و سایت ها و وبلاگ هایی می توانند موفق شوند که فاکتورهای مثبت بیشتری در اختیار داشته باشند، به هر صورت این مطلب را اختصاص داده ایم به یادآوری برخی اشتباهات رایج در کدنویسی و راه حل رفع آنها.
سرویس اعتبار سنجی w3c
قبل از پرداختن به اشتباهات رایج کدنویسی و راه حل آنها، باید با سرویس اعتبار سنجی w3c آشنا باشید، این سرویس توسط کنسرسیوم جهانی وب راه اندازی شده و کدنویسی صفحات را در زمینه زبان های HTML، CSS، XHTML و ... سنجش می کند، البته معمولا برای هر دسته از زبان ها یک آدرس مجزا در نظر گرفته شده است که در زیر ملاحظه می کنید:
اعتبار سنجی کدهای HTML، XHTML و...:
validator.w3.orgاعتبار سنجی کدهای CSS:
jigsaw.w3.org/css-validatorبا مراجعه به سرویس های بالا و درج آدرس صفحات وب یا فایل های css می توانید از معتبر بودن کدها یا اشکالات موجود در آنها مطلع شوید، البته همان طور که اشاره شد، هیچ الزامی برای کدنویسی معتبر نیست و خیلی از صفحات وب پر از خطاهای مختلف هستند که ممکن است تاثیر چندانی هم بر ظاهر آنها نداشته باشد (هر چند بر رتبه آنها در seo کم و بیش تاثیر منفی خواهد داشت)، از طرفی اهمیت معتبر بودن کدهای مربوط به استایل css از معتبر بودن کدهای html کم تر است، چرا که کدهای html مستقیما توسط ربات موتورهای جستجو مورد تحلیل قرار می گیرد و نقش اصلی در پردازش یک سایت یا وبلاگ دارد، اما استایل css عمدتا توسط ربات ها بررسی نمی شود (هر چند در مورد ربات گوگل ممکن است این طور نباشد).
نکته 1: با استفاده از قابلیت نصب Add-ons (پلاگین های اضافه شونده) در مرورگر هایی مانند فایرفاکس، گوگل کروم و... می توانید بدون مراجعه مستقیم به سرویس های فوق، از خدمات آنها استفاده کنید.
نکته 2: قبل از هر نوع تغییر در کدنویسی سایت یا قالب وبلاگ، فراموش نکنید که یک پشتیبان از آن تهیه نمائید تا در صورت بروز مشکلات ناخواسته بتوانید وضع را به حالت سابق برگردانید.
کدنویسی بر اساس نسخه html
اولین نکته ای که برای نوشتن کدهای معتبر در وب باید به آن توجه کنیم، نسخه html است که قصد استفاده از آن را داریم، توضیح اینکه زبان html در نسخه های متفاوتی ارائه شده که هر کدام تفاوت هایی با هم دارند، به طور مثال نسخه XHTML 1.0 Transitional با HTML 4.01 Transitional متفاوت است، برای کسب اطلاعات بیشتر می توانید مطلب زیر را مطالعه کنید:
چرا و چگونه از DOCTYPE در HTML استفاده کنیم؟
از قلم انداختن تگ های اصلی
یکی از خطاهایی که ممکن است سرویس اعتبارسنجی w3c از کد نویسی ما داشته باشد، خطای از قلم انداختن تگ های اصلی است که با عبارت نمونه زیر مشخص می شود:
end tag for "head" which is not finishedاین خطا معمولا به دلیل از قلم انداختن تگ های اصلی مانند title است که باید برای صفحه خود یک عنوان با استفاده از تگ title در بین تگ های head تعریف کنید.
استفاده نکردن از ویژگی xmlns برای html
یکی دیگر از خطاهای رایج در کدنویسی html، خطای Missing xmlns attribute است:
Missing xmlns attribute for element html. The value should be: http://www.w3.org/1999/xhtmlاین خطا معمولا به دلیل تعریف نکردن آدرس استاندارد xhtml در ابتدای تگ html است (زمانی که از نسخه xhtml استفاده می کنید باید در تگ html به مرجع xhtml آن آدرس دهید)، برای رفع آن باید تگ ابتدایی html به صورت زیر باشد:
<html xmlns="http://www.w3.org/1999/xhtml">
استفاده نادرست از تگ های یکتا
در نسخه های مختلف html، تگ های یکتایی مانند img، br، meta و... با علامت / در انتهای تگ یا بدون آن بسته می شوند، به طور مثال در xhtml تگ br باید به صورت زیر بسته شود.
<br />اما همین تگ در html نسخه 5 در حالت استاندارد به صورت زیر بسته می شود (هر چند ممکن است حالت های دیگر نیز مجاز باشند).
<br>حال اگر این تگ ها را در نسخه های متفاوت به صورت غیر استاندارد استفاده کنید خطای نمونه زیر را دریافت خواهید کرد:
end tag for "br" omitted, but OMITTAG NO was specifiedبرای رفع این مورد باید به دنبال تگ مشخص شده در خطا باشید و انتهای آن را با علامت / یا بدون آن ببندید.
استفاده نادرست از تگ های جفتی
اکثر تگ های html به صورت جفتی تعریف می شوند، به طور مثال وقتی از بلاک div استفاده می کنید باید به صورت نمونه زیر کد آن را تعریف کنید.
<div>اگر به فرض تگ دوم را با علامت / نبندید یا اینکه یکی از تگ ها را به طور کامل از قلم بیندازید، خطای نمونه زیر را دریافت خواهید کرد:
</div>
end tag for "div" omitted, but OMITTAG NO was specified
استفاده از خاصیت های منسوخ شده
در ابتدای پیدایش html و در نسخه های اولیه برخی از خاصیت های مربوط به جلوه های ظاهری برای تگ ها به صورت خطی قابل استفاده بود، به طور مثال می توانستیم از خاصیت align به طور مستقیم برای چینش عناصر استفاده کنیم، اما به تدریج در نسخه های جدیدتر ویژگی های ظاهری به استایل css منتقل شد و دیگر تعریف آنها به صورت خطی مجاز نیست (البته اگر از DOCTYPE Strict استفاده کنید)، به همین دلیل به جای align باید از text-align استفاده کنیم.
نمونه خطای دریافتی:
there is no attribute "align"مشابه همین خطا ممکن است در مورد خاصیت border برای تگ img در html نسخه 5 رخ دهد.
The border attribute is obsolete. Consider specifying img { border: 0; } in CSS instead.
استفاده از جاوا اسکریپت به صورت خطی
اگر در صفحات خود به صورت خطی (inline) از جاوا اسکریپت استفاده کنید، این کار ممکن است باعث نمایش خطاهای ناخواسته شود، برای جلوگیری از بروز این نوع خطاها درابتدای کدهای خود از تگ CDATA استفاده نمائید، به طور مثال:
<script type="text/javascript">
//<![CDATA[
کد جاوا اسکریپت را در این قسمت قرار دهید
//]]>
</script>
استفاده نکردن از خاصیت های الزامی
زمانی که از یک تصویر در صفحه خود استفاده می کنید، باید در کنار تگ img، خاصیت alt (متن جانشین تصویر) را نیز تعریف کنید، در غیر این صورت ممکن است با خطای زیر مواجه شوید:
An img element must have an alt attribute, except under certain conditions. For details, consult guidance on providing text alternatives for images.همین مورد ممکن است برای کدهای جاوا اسکریپت نیز اتفاق بیفتد، به طور مثال استفاده از type برای وارد کردن کدهای جاوا اسکریپت الزامی است و لذا مثال زیر اشتباه است:
<script>نمونه خطای دریافتی:
</script>
required attribute "type" not specifiedکد صحیح:
<script type="text/javascript">
</script>
استفاده از کاراکتر & در آدرس های وب
اگر در آدرس های وب (URL) موجود در صفحات سایت یا وبلاگ شما از کاراکتر & استفاده شود، خطای زیر را دریافت خواهید کرد:
& did not start a character reference. (& probably should have been escaped as &.)برای رفع این خطا باید به جای علامت & از کاراکتر استاندارد ;amp& در تمام لینک ها استفاده کنید، به طور مثال لینک زیر صحیح نیست:
<a href="http://www.yoursite.com/?q=1&t=title">link</a>نمونه صحیح:
<a href="http://www.yoursite.com/?q=1&t=title">link</a>
استفاده از تگ embed
اگر چه تگ embed معمولا در صفحات وب برای نمایش کلیپ های فلش، پخش ویدئو، صدا و... مورد استفاده قرار می گیرد، اما جالب است که سرویس اعتبارسنجی w3c آن را معتبر نمی داند و نمونه خطای زیر را ممکن است نمایش دهد:
element "embed" undefinedبرای رفع این گونه مشکلات یک راه حل (که به نظر تنها راه حل کاربردی نیز می رسد) استفاده از document.write در جاوا اسکریپت است، بدین صورت کدهایی که باید مستقیم در صفحه قرار گیرند با واسطه جاوا اسکریپت درج می شوند، به طور مثال از کد زیر می توان برای درج کلیپ فلش استفاده کرد بدون اینکه کدنویسی نامعتبر شود:
<script type="text/javascript">
/* <![CDATA[ */
document.write('<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" id="flashmovie" width="120" height="90">');
document.write('<param name="flashmovie" value="flashmovie.swf" />');
document.write('<param name="bgcolor" value="#666666" />');
document.write('<param name="quality" value="high" />');
document.write('<param name="seamlesstabbing" value="false" />');
document.write('<param name="allowscriptaccess" value="samedomain" />');
document.write('<embed type="application/x-shockwave-flash" pluginspage="http://www.adobe.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" name="flashmovie" width="120" height="90" src="flashmovie.swf" bgcolor="#666666" quality="high" seamlesstabbing="false" allowscriptaccess="samedomain">');
document.write('</embed>');
document.write('</object>');
/* ]]> */
</script>
تعریف چندباره id
هر عنصر در صفحات وب مجاز به استفاده از یک id منحصر به فرد است و لذا اگر چند عنصر با یک id در کدنویسی خود داشته باشیم با خطای زیر مواجه خواهیم شد:
ID "div-id" already definedبرای رفع این خطا باید در کد خود به دنبال id های مشترک باشید و برای هر عنصر از یک id منحصر به فرد استفاده کنید.
چینش اشتباه تگ ها درون هم
استفاده از تگ ها در html باید طبق استاندارد خاصی انجام شود، به طور مثال درون تگ p که مربوط به پاراگراف است، مجاز به استفاده از تگ div نیستیم.
نمونه خطای دریافتی:
document type does not allow element "div" here; missing one of "object", "applet", "map", "iframe", "button", "ins", "del" start-tagلذا نمونه زیر اشتباه است:
<p><div></div></p>نمونه صحیح:
<div><p></p></div>به این حالت در اصطلاح تگ های آشیانه ای یا nested می گویند که باید اصول و استاندارد آنها در کدنویسی رعایت شود.
در پایان این مطلب یادآور می شویم که خطاهای اعتبارسنجی محدود به موارد گفته شده نیستند، از طرفی اگر سایت یا وبلاگ فعلی شما دارای خطاهای زیادی است ولی با این حال در موتورهای جستجو رتبه خوبی دارد، شاید اصلاح و استانداردسازی کدها چندان هم ضروری نباشد، چرا که خیلی از موارد خطای w3c از دید موتورهای جستجو مشکل جدی تلقی نمی شوند و تنها تعداد خاصی از آنها تاثیر مستقیم بر رتبه سایت یا وبلاگ شما دارند.

» رتبه بندی الکسا (Alexa) چیست و چقدر اهمیت دارد؟!
» حل مشکل مطالب تکراری (Duplicate Content) در سایت
» نحوه دوباره نویسی لینک (URL Rewrite) در htaccess
» چگونه سایت یا وبلاگ را برای موتورهای جستجو بهینه سازی کنیم؟
» پیج رنک چیست و چگونه می توان آن را افزایش داد؟


ـــــــــ
موفق باشید!
یه سایت وردپرسی دارم تو گوگل وبمسترم چند تا ارور گاهی هست که ارور های NOT FOUND 404 هستند این آدرس ها رو از طریق REMOVIE URLS پاک می کنم اما باز بعد از چند روز دوباره میان تو گوگل وبمسترم ... می دونید مشکل چیه؟
احتمالا لینک ها در سایت شما برای ربات های جستجوگر همچنان قابل دسترس هستند (یا از طریق صفحات سایت یا از طریق نقشه سایت)، برای حذف کامل باید ابتدا لینک های مرده را از صفحات سایت خود حذف کنید، سپس در فایل robot.txt در ریشه سایت، لینک های حذف شده را Disallow نمائید، اطلاعات بیشتر:
نحوه استفاده از فایل robots.txt در سایت
سایت شما از جمله محدود سایت های آموزشی در مورد برنامه نویسی و مهارت های وب است که از لحاظ ساختاری مانند کد های html ، css و rss هیچ اشکالی ندارد به همین مناسبت به شما تبریک می گویم و فکر میکنم بازدیدکنندگان این سایت حق دارند که به مطالب تان اعتماد کنند.
با تشکر
مصطفی پورسینا
www.mostafapursina.com
سپاس فراوان از نظر لطف شما.
یکی از مشکلات اساسی طراحی وب بحث سایز بندی با مرورگر هستش. خب شما مثلا اگر همین وب سایتتون رو پنجره مرورگر رو کوچک کنین تمام المان ها سر جاشونن مثل هدر متون عکس ها دقیقا مثل وب سایتی مانند فیسبوک. بعضی سایت ها هم هستند که اگر المان ها قرار باشه حرکت کنند بعد از کوچیک کردن مرورگر اونها هم به همون سمت حرکت کنن.
تنها سوال من اینه چطور اینکار رو بکنیم. من خودم یک صفحه طراحی کردم ولی هر المانی یک سمت میره بعضی المانا هم ثابتن...!!!!
پاسخ کلی سوال شما این است که باید تجربه استفاده از خاصیت های css و تکنیک های مبتنی بر آن را به اندازه کافی داشته باشید، اما جهت راهنمایی بیشتر:
به طور کلی برای حالت ثابت از یک یا چند بلاک اصلی به عنوان دربرگیرنده سایر المان ها استفاده می شود (گام اول) که مقادیر آنها به پیکسل (px) و با میزانی ثابت مشخص می شود، سپس داخل آن بلاک، بلاک های سطح دوم تعریف می شوند (به فرض بلاک هدر، منو، سایدبار و...)، برای مواردی که نیاز است در کنار هم باشند خاصیت های float با مقادیر left یا right و display با مقادیر inline-block کاربرد دارند، همچنین باید دقت کنید که عرض یا ارتفاع عناصر از بلاک والد (بلاک دربرگیرنده) تجاوز نکند که در این خصوص باید رفتار ویژگی هایی مانند padding و margin را نیز لحاظ کنید، مثال:
<style type="text/css">اما برای حالت متحرک معمولا از مقادیر درصدی به جای پیکسل برای مقدار دهی استفاده می شود، ضمن اینکه از خاصیت هایی مانند margin-left و margin-right (یا از روش های دیگر) نیز برای تنظیم بلاک والد و شناور کردن آن در یک طرف استفاده می شود، مثال:
.main{
height:auto;
width:960px;
border:1px solid #CCC;
padding:4px;
margin-left:auto;
margin-right:auto;
}
.side-right{
width:200px;
height:auto;
border:1px #F90 solid;
float:right;
display:inline-block;
margin:2px;
}
.content-page{
width:540px;
height:auto;
border:1px #9C0 solid;
float:right;
display:inline-block;
margin:2px;
}
.side-left{
width:200px;
height:auto;
border:1px #03C solid;
float:right;
display:inline-block;
margin:2px;
}
.clear{
clear:both;
}
</style>
<div class="main">
<div class="side-right">
سایدبار راست
</div>
<div class="content-page">
بلاک محتوا
</div>
<div class="side-left">
سایدبار چپ
</div>
<div class="clear"></div>
</div>
<style type="text/css">
.main{
height:auto;
width:960px;
border:1px solid #CCC;
margin-left:auto;
margin-right:0px;
}
.content{
width:68%;
height:auto;
border:1px #9C0 solid;
float:right;
display:inline-block;
margin:2px;
}
.side{
width:30%;
height:auto;
border:1px #03C solid;
float:right;
display:inline-block;
margin:2px;
}
.clear{
clear:both;
}
</style>
<div class="main">
<div class="side">
سایدبار
</div>
<div class="content">
بلاک محتوا
</div>
<div class="clear"></div>
</div>
چندتا سوال داشتم ممنون میشم پاسخ بدین:
1- در متن ها و پست ها گاهی تصویر هم بکار میره. اگه تگ img داخل تگ p بکار بره بهتره یا اگه img خارج از p باشه بهتره؟ منظورم این دو حالته:
<p><img />matn</p>
<img /><p>matn</p>
2- میخوام یه عنوان رو لینک کنم. تگ h رو داخل تگ a بذارم یا بر عکس؟
3- یه وبسایت گفته بود میشه تگ h1 رو داخل تگ title هم بکار برد و این روش از نظر سئو بهتره. اینطوری:
<title><h1>onvan</h1></title>به نظر شما درسته؟
4- تگ های h رو حتما باید یک بار در صفحه بکار برد؟
با سپاس
1- تگ p نمایانگر پاراگراف است، لذا تصاویر داخل تگ p عموما نشانشگر مطالب حاوی تصویر هستند، در نتیجه به تجربه استفاده از تگ img داخل p در مورد محتوای سایت می تواند صحیح باشد (هیچ شواهد صد در صدی برای مفید بودن این روش وجود ندارد، منتها در مقایسه با حالت معمول ضرری هم نخواهد داشت!).
2- بهترین حالت این است که تگ a داخل تگ h باشد، هر چند در HTML 5 هر دو حالت ممکن است، اما برای نسخه های دیگر HTML تنها روش گفته شده معتبر است و به لحاظ منطقی نیز بهتر است همین شیوه را انتخاب کنید.
3- تگ title جزء تگ های قسمت head است و محتوای داخل آن هر چه باشد به عنوان متن ساده پردازش می شود، لذا h1 که مربوط به قسمت body است نباید در title استفاده شود و تاثیری ندارد!
4- تگ h1 یک بار، برای سایر موارد در حد معمول محدودیتی نیست!
از طرفی صفحه به راحتی قابل دانلود است! چطور از رمز عبورم محافظت کنم؟
آیا راهی هست که از دانلود صفحه جلوگیری کنم؟
با تشکر
کدهای PHP به دلیل ماهیت خاصشان تنها در سرور اجرا شده و توسط کاربران دیده نمی شوند (صرفا خروجی HTML قابل روئیت است)، اگر سرور شما به جای چاپ خروجی، کدها را نمایش می دهد، قاعدتا اشکالی در پیکربندی سرور یا در کدهای شما وجود دارد، با این وجود و برای امنیت بیشتر می توانید در یک فایل htaccess. (سرور لینوکس) دسترسی به فایل های مورد نظر را با نمونه دستورات زیر مسدود کنید:
<FilesMatch "config.php|include.php">یا
Order allow,deny
Deny from all
</FilesMatch>
order allow,deny
deny from all
<Files ~ "\.(php)$">
order deny,allow
allow from all
</Files>
تا آنجا که اطلاع داریم این ویژگی تنها در مرورگر IE پشتیبانی می شود (آن هم با اشکال) و به دلیل غیر استاندار بودن، بهتر است از آن استفاده نکنید!
چطوری میتونم مشکلم رو بر طرف کنم؟
ادرس:
http://bazaaar.vcp.ir
نوع خطاهایی که w3c نمایش می دهد بسیار متنوع است و امکان طرح همه آنها در هیچ آموزشی میسر نیست! در مورد سایت شما متاسفانه پس از اینکه کدنویسی قالب و امکانات سایت به پایان می رسد، رفع این نوع خطاها به سادگی ممکن نیست و باید زمان زیاد و بررسی دقیقی رو قالب و ماژول های به کار رفته در صفحات انجام شود، یک خطای کدنویسی می تواند باعث ایجاد اشکالات دیگری در صفحه شما شود، در واقع بهترین راه این است که قبل از طراحی قالب و ماژول ها، سایتتان را مرحله به مرحله چک کنید، چون زمانی که خطاها محدود باشند، پیدا کردن علت آنها راحت تر است!
تشکر
نمی توان گفت صد در صد، اما از نظر سئو انجام این کار یک امتیاز مثبت است، اما صفحات زیادی (شاید اکثر موارد) در وب وجود دارند که اهمیت خاصی برای اعتبارسنجی سایت w3.org قائل نیستند و مشکلی هم برایشان پیش نمی آید!
https://www.youtube.com/watch?v=FPBACTS-tyg&feature=youtu.be
جالب اینگه مرورگر یکسان با یک ورژن خاص استفاده میکنم و همون اروری که شما فرمودین میده !!!!
element "embed" undefined
فایل زیرو دانلود کنید و تو فایل سی اس اسم میخوام یه فرمی رو لبه هاشو خمیده کنم با border-radius ولی نمیشه هر کاری کردم نشد لطفا راهنماییم کنید
ممنون
http://s7.picofile.com/file/8251345942/wp_nopo.rar.htmlحجم فایل 200 کیلوبایته
لطفا کمکم کنید
#search-form input {همچنین می توانید اینگونه موارد را به جای اعمال بر روی عنصر نهایی، بر روی عناصر والد مانند تگ div (با همپوشانی رنگ پس زمینه) اعمال کنید.
border-radius:10px;
}


- مواردی که به کلی خارج از موضوع این مطلب هستند را در فرم منوی "تماس با ما" مطرح و پاسخ را از طریق ایمیل دریافت کنید.
- به سوالات کلی، مبهم، غیرضروری و مشکلاتی که تلاشی برای رفع آن نکرده باشید پاسخ خاصی داده نخواهد شد.
- کدها و اسکریپت های طولانی را ترجیحا در یک صفحه وب آنلاین قرار دهید تا امکان تست و بررسی وجود داشته باشد.
- تمام یادداشت ها بررسی و برای هر کاربر زمان مشخصی جهت پاسخگویی در نظر گرفته می شود، لذا از طرح سوالات متعدد در بازه زمانی کوتاه خودداری کنید.
با توجه به تاریخ نگارش آموزش های سایت و پیشرفت تکنولوژی های مرتبط با وب در سالیان اخیر، محتوای برخی از مطالب قدیمی ممکن است نیاز به ویرایش و به روزرسانی داشته باشند که این کار هم زمان با تهیه نسخه جدید «وبگو» به مرور در حال انجام است، لطفا در استفاده از مطالب سایت به این نکته دقت داشته و حتی المقدور از چند منبع مختلف استفاده نمائید.