مصطفى محى الدين » JavaScript & xhtml & AJAX

Archive for the ‘JavaScript & xhtml & AJAX’ Category

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

Thursday, August 14th, 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">  </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>