14 August, 2008تصحيح الأخطاء لأتباع المعايير القياسية
السلام عليكم ورحمة الل وبركاتة منذ فترة شاركت فى موضع فى سوالف عن المعايير القياسية
وحبيت أنقلوا لكم لأهيمتوا ولتكون مواقعنا مطابقة للمعايير القيسية
مثلآ هذا الخطأ
<img src="imges.gif" width="50" height="50"/>
وهذا هو الحل الصحيح
<img src="imges.gif" width="50" height="50" alt="" />
وهذا خطأ أيضآ
<br>
وهذا الحل الصحيح
<br />
اولآ وقبل كل شىء قد يحدث خطآ نتيجة فى عدم غلق الوسوم
مثل هذا
<p align="right"> <a href="http://www.site.net">siet</a>
الحل الصحيح
<p align="right"> <a href="http://www.site.net">site</a></p>
فعند فتح وسم يجب التأكد من أغلاقوا
<b></b>
<p></p>
<li></li>
<ul></ul>
<div></div>
<span></span>
<label></label>
وأيضا من بعض الأخطاء
<hr>
الصحيح
<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>
<meta name="description" content="" ></meta>
الصحيحة
<meta name="keywords" content="" />
<meta name="description" content="" />
ولاتنسى ان الميتا تضع بين head
و التايتل تضع بين
head
واذا كان أستيراد ل
css
او جافا سكربت تضعوا بين
head
أو ايقونة الموقع
واذا قمت بكتابة css فى الصفحة يكون بهذا الشكل
<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>
<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>
باقى محتوى الصفحة يضع بين
<body>
<div>
<h1>header</h1>
</div>
<div>
<b>data</b> <br />
<a href="#">link</a> </div>
<div>
footer </div>
</body>
ولاتنسى أغلا الصفحة ب
</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>
من بعض الأخطاء التى يتبعها الكثير من أصحاب المواقع فى form
<div>
<form action="index.php" method="post"> <input type="text" name="email"/>
<input type="submit" name="submit" value="submit"/>
</div>
فى هذا المثال الخاطىء لم يتم أغلاق form
وهذا الحل الصحيح
<div>
<form action="index.php" method="post"> <input type="text" name="email"/>
<input type="submit" name="submit" value="submit"/>
</form></div>
<form></form>
ولم يتم كتابة input بالشكل السليم
وشىء هام أيضآ أحيانا يقومموا بوضع قيمة داخل type بأسم نفس الحقل
مثل ذلك
<input type="email" name="email"/>
type تكون text , password, submit, والمزيد تجدوا فى w3
وهذا الحل الصحيح
<div>
<form action="index.php" method="post">
<input type="text" name="email" />
<input type="submit" name="submit" value="submit" />
</form> </div>
فى التابل بعض الأشياء تلغى لمطابقة المعايير القياسية مثل height اما width أستخدامها صحيحة
التحكم فى التابل يكون عن طريق css
وهذة أمثلة مطابقة للمعايير القياسية
< !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>
—
< !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 لتتأكد أنهم موافقين للمعايير القياسية
http://validator.w3.org/check?uri=http://www.khdma.net/uploads/w3.html
http://validator.w3.org/check?uri=http://www.khdma.net/uploads/ww3-2.html