تصحيح الأخطاء لأتباع المعايير القياسية

**tech** · 18-07-2008

السلام عليكم ورحمة اللة وبركاتة

نريد المشاركة فى هذا الموضوع لأتباع أخواننا المعايير القياسية فى صفحاتهم بنسبة 100%

نريد من كل من يشارك ان يكتب ما يعرفوا ويكتب الحل السليم بأستخدام المعايير القياسية

مثلآ هذا الخطأ

كود HTML:

<img src="imges.gif" width="50" height="50">

وهذا هو الحل الصحيح

كود HTML:

<img src="imges.gif" width="50" height="50" alt="" />

وهذا خطأ أيضآ

كود HTML:

<br>

وهذا الحل الصحيح

كود HTML:

<br />

أرجو مشاركة جميع الأعضاء المتميزين فى css لنتبع أفضل المعايير القياسية وتعم الفائدة

**kingsoft** · 19-07-2008

أتوقع لا تحتاج موضوع

يكفى الاضافات المعروفة على الفايرفوكس التى تبحث عن الاخطاء وتعطيك الطريقة الصحيحة مع الشرح

https://addons.mozilla.org/en-US/fir...ommended/cat:4

بالنسبة للمواقع المشهور امثال قوقل و الياهو توجد فيها اخطاء كثيرة

لكن هناك موقع سليم ولا يوجد اي خطاء

Veerle's blog 2.0 - Webdesign - XHTML CSS | Graphic Design

لو نظرنى للمواقع الضخمة فى تطوير الويب راح تشوف فيها اخطاء لووولز مثل

SitePoint : New Articles, Fresh Thinking for Web Developers and Designers

**tech** · 19-07-2008

السلام عليكم ورحمة اللة وبركاتة

مرحبآ بك kingsoft

بالنسبة لمصححات المعايير القياسية مثل mozilla , Microsoft Expression Web وغيرهم من البرامج غير دقيقة فى التصحيح وقد تجد صعوبة شديدة لو مشيت ورة برنامج منهم فى التصحيح تجد صعوبة شديدة فى التصحيح وعن تجربة

الهدف من هذا الموضوع حصر الأخطاء التى نتبعها فى صفحاتنآ ولو نظرت للموضوع ستجد أن من السهل حصر هذة الأخطاء

وانا أرى ان هذة الأخطاء ما تفرق مع هذة المواقع فمثل ما قلت حضرتك فهى مواقع كبيرة بل شركات كبيرة

فى أنتظار باقى مشاركات الأعضاء

**عبدالله بن سعود** · 23-07-2008

ومنكم نستفيد

بارك الله فيك

**فكرة مصمم** · 23-07-2008

شكرا على هذا الموضوع ..

واتمنى من مَن يضع خطأ وتصحيحه ان يشرح شرح بسيط جدا .. (لماذا) وضع الكود هكذا ولم يضعه هكذا !

وشكرا

**www.khdma.com** · 23-07-2008

السلام عليكم

موضوع هام جدآ

حبيت أشاركم فى هذا الموضوع المهم

اولآ وقبل كل شىء قد يحدث خطآ نتيجة فى عدم غلق الوسوم

مثل هذا

كود HTML:

<p align="right">
<a href="http://www.swalif.net">swalif</a>

الحل الصحيح

كود HTML:

<p align="right">
<a href="http://www.swalif.net">swalif</a></p>

فعند فتح وسم يجب التأكد من أغلاقوا

كود HTML:

<b></b>
<p></p>
<li></li>
<ul></ul>
<div></div>
<span></span>
<label></label>

وأيضا من بعض الأخطاء

كود HTML:

<hr>

الصحيح

كود HTML:

<hr/>

طبعآ نتحدث فى xhtml

ضع ها أعل الصفحة

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >

والكثير من أصحاب المواقع يستخدمون الميتا بالطريق الأعتيادية

الخاطئة

كود HTML:

<meta name="keywords" content="">
<meta name="description" content="" >

الصحيحة

كود HTML:

<meta name="keywords" content="" />
<meta name="description" content="" />

ولاتنسى ان الميتا تضع بين head

و التايتل تضع بين
head
واذا كان أستيراد ل
css
او جافا سكربت تضعوا بين
head
أو ايقونة الموقع

واذا قمت بكتابة css فى الصفحة يكون بهذا الشكل

كود HTML:

<style type="text/css"> 
<!--
body {
	margin: 0px 0px;
	topmargin: 0;
	leftmargin: 0;
	background: #4C4C4C;
	font-family: tahoma;
	font-size: 12px;
	color: #727272;
}
-->
</style>

وعند كتابة جافا سكربت فى الصفحة

كود HTML:

<script type="text/javascript" language="JavaScript">
<!--

function test(value){

}

//-->
</script>

كود HTML:

<head>
<title>site</title>
<meta name="keywords" content="" />
<meta name="description" content="" />

<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" /> 
<link rel="StyleSheet" href="style.css" type="text/css" />
<script type="text/javascript" src="script.js"></script>

</head>

باقى محتوى الصفحة يضع بين

كود HTML:

<body>

<div>
<h1>header</h1>
</div>

<div>
<b>data</b>
<br/>
<a href="#">link</a>
</div>

<div>
footer
</div>

</body>

ولاتنسى أغلا الصفحة ب

كود HTML:

</html>

وهذا تلخيص سريع

كود HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>site</title>
<meta name="keywords" content="" />
<meta name="description" content="" />

<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" /> 
<link rel="StyleSheet" href="style.css" type="text/css" />
<script type="text/javascript" src="script.js"></script>

<style type="text/css"> 
<!--
body {
	margin: 0px 0px;
	topmargin: 0;
	leftmargin: 0;
	background: #4C4C4C;
	font-family: tahoma;
	font-size: 12px;
	color: #727272;
}
-->
</style>

<script type="text/javascript" language="JavaScript">
<!--

function test(value){

}

//-->
</script>


</head>

<body>

<div>
<h1>header</h1>
</div>

<div>
<b>data</b>
<br />
<a href="#">link</a>
</div>

<div>
footer
</div>

</body>

</html>

--------

**jadweb.com** · 26-07-2008

جزاك الله خير

**www.khdma.com** · 27-07-2008

السلام عليكم ورحمة اللة وبركاتة

أستكمالآ لمشاركتى

من بعض الأخطاء التى يتبعها الكثير من أصحاب المواقع فى form

مثال لطريقة خاطئة

كود HTML:

<div>

<form action="index.php" method="post">
<input type="text" name="email">
<input type="submit" name="submit" value="submit">

</div>

فى هذا المثال الخاطىء لم يتم أغلاق

كود HTML:

<form>

كود HTML:

<form></form>

ولم يتم كتابة input بالشكل السليم

كود HTML:

<input type="text" name="email" />

وشىء هام أيضآ أحيانا يقومموا بوضع قيمة داخل type بأسم نفس الحقل

مثل ذلك

كود HTML:

<input type="email" name="email">

type تكون text , password, submit, والمزيد تجدوا فى w3

وهذا الحل الصحيح

كود HTML:

<div>
<form action="index.php" method="post">
<input type="text" name="email" />
<input type="submit" name="submit" value="submit" />
</form>
</div>

**tech** · 29-07-2008

السلام عليكم

شكرآ يا khdma لاكن لدى سؤال انا أحترت مع table لايوافق المعايير القياسية أبدآ

ياليت تقلى على حل

فى أنتظارك وشكرآ لمجهودك

**www.khdma.com** · 31-07-2008

السلام عليكم ورحمة اللة وبركاتة

معذرة أخى الكريم على التأحر فى الرد

فى التابل بعض الأشياء تلغى لمطابقة المعايير القياسية مثل height اما width أستخدامها صحيحة

التحكم فى التابل يكون عن طريق css

وهذة أمثلة مطابقة للمعايير القياسية

كود HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>page 1</title>
	<style type="text/css">
	<!--
	
	
	table td {
	height: 30px;
	background: yellow;
	border: 2px dotted #ff0000;
	}

	-->
	</style>
	
	<script type="text/javascript" language="JavaScript">
	<!--

	function test(value){

	}

	//-->
	</script>

</head>
<body>

	<div>
		<table width="100%">
			<tr>
				<td colspan="2" width="100%">
					<span>content 1</span>
				</td>
			</tr>
			
			<tr>
			
				<td width="50%">
					<span>content 2</span>
				</td>
				
				<td width="50%">
					<span>content 3</span>
				</td>
				
			</tr>

		</table>
	</div>
	
</body>
</html>

كود HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>page 1</title>
	
	<script type="text/javascript" language="JavaScript">
	<!--

	function test(value){

	}

	//-->
	</script>

</head>
<body>

	<div>
		<table width="100%">
			<tr>
				<td colspan="2" width="100%" style="height: 30px; border: 1px solid blue;">
					<span>content 1</span>
				</td>
			</tr>
			
			<tr>
			
				<td width="50%" style="height: 50px;  border: 1px dotted maroon;">
					<span>content 2</span>
				</td>
				
				<td width="50%" style="height: 50px; border: 1px dotted navy">
					<span>content 3</span>
				</td>
				
			</tr>

		</table>
	</div>
	
</body>
</html>

وهذة روابطهم فى w3 لتتأكد أنهم موافقين للمعايير القياسية

[Valid] Markup Validation of http://www.khdma.net/uploads/w3.html - W3C Markup Validator
[Valid] Markup Validation of http://www.khdma.net/uploads/ww3-2.html - W3C Markup Validator

**tech** · 02-08-2008

مشكوووووووور أخى مصطفى

فعلآ مطابق 100%

**عسكر** · 13-09-2008

يعطيك العافية اخوي طبقت اشياء كثيرة وضبطت معي الحمد لله ،،

انا عندي البنرات عملتها بهذي الطريقة :

كود:

 
<p align="center">
<a rel="nofollow" href="http://www.m3rof.com/up">
<img border="0" src="http://www.m3rof.com/banarat/up.gif" width="468" height="60"alt=""></a></p>

المشكلة تطلع عندي هنا <p هذا الخطأ كيف اقدر اعدله ؟؟

الله يعطيك العافية ،،

انتظر ردك اخوي

**Lakoubi** · 13-09-2008

السلام عليكم

إخواني عدد الأخطاء الممكن حدوثها كبير جدا ، و ذكرها بهذا الترتيب العشوائي لن يفيد الكثير ..
الطريقة المثلى تكون باستعمال The W3C Markup Validation Service
فالموقع يعطيك الخطأ و حله ، و إن لم تفهم فانسخ الخطأ على جوجل ، أكيد هناك من صادفه قبلك و تكلم عنه
هذه طريقتي ، افحصوا مدونتي لتجدوا الكود قياسيا 100%

بالتوفيق

**سالم العليلي** · 14-09-2008

المشاركة الأصلية كتبت بواسطة عسكر مشاهدة المشاركة

يعطيك العافية اخوي طبقت اشياء كثيرة وضبطت معي الحمد لله ،،

انا عندي البنرات عملتها بهذي الطريقة :

كود:

 
<p align="center">
<a rel="nofollow" href="http://www.m3rof.com/up">
<img border="0" src="http://www.m3rof.com/banarat/up.gif" width="468" height="60"alt=""></a></p>

المشكلة تطلع عندي هنا <p هذا الخطأ كيف اقدر اعدله ؟؟

الله يعطيك العافية ،،

انتظر ردك اخوي

ان وضع الوسم <p> هو تلقائي وخاصه في برامج التحرير مثل ويب اكسبيرشن ..ولكي تتلافى ذلك استخدم وسم <div> وراح يختفي الوسم <p> طبعا رد سريع على سؤالك ..
واتفضل هذا الكود :

كود:

<div class="banner">
<a rel="nofollow" href="http://www.m3rof.com/up">
<img border="0" src="http://www.m3rof.com/banarat/up.gif" alt=""/></a></div>

اضف هذا للسي اس اس ..

كود:

.banner {
	padding: 0px;
	width: 468px;
	height: 60px;
	margin:0px auto 0px auto;
}

**عسكر** · 29-09-2008

الف شكر يا ملك الفوتوشوب ،،

شاكر لك المساعدة ،،

تحياتي
المعروف

الموضوع: تصحيح الأخطاء لأتباع المعايير القياسية

أدوات الموضوع

بحث في الموضوع

تصحيح الأخطاء لأتباع المعايير القياسية

المواضيع المتشابهه

إلي مهتمي المعايير القياسية ،، تفضلوا

المعايير القياسية

لماذا هذا الخطأ مع المعايير القياسية ؟؟؟!

ال id في url و المعايير القياسية

المعايير القياسية و حلم الاكواد الملائمة

ضوابط المشاركة