مصممو ومطوروا الويب دائما ما يستخدمون لغة ال HTML فى مشاريعهم اليوميه، لكن هناك بعض الملاحظات التى قد يغفل عنها الكثيرين من المطورين ويتناسونها مع أنها اشياء مهمه وقد تؤثر على مشروعك بشكل كامل.
- أكتب العناصر بحرف Small
لا يوجد فرق واضح بين كتابة أسم العنصر داخل ال HTML بحروف كبيره أو صغيره، ففى كلى الحالتين يتم تطبيق ما بداخل العنصر بنجاح، فكتابة h1 بهذا الشكل ، لا تختلف على الاطلاق عن كتابته H1 بحروف كبيره هكذا.ولكن منظمة W3C تأتى فى توصياتها الرسميه بتفضيل كتابة أسماء العناصر بجروف صغيره small .
الكلام ينطبق أيضا على ال Attributes
- قم بإغلاق الأوسمه الفرديه
، ولا يوجد خطأ فى ذلك، ولكن من المفضل أن تقوم بوضع علامة سلاش / بعد اسم الوسم لإغلاقه هكذا </ br> حتى يكون قابل للقراءه من قبل ملفات ال XML .
- وسم الإغلاق مهم للغايه
لكن ماذا لو كتبت وسم h1 بدون وسم إعلاق وكتبت تحته وسم p ؟!! هكذا ▼
< h1 > مرحبا
< p/ > أهلا وسهل < p >
قم بتجربته بنفسك، ولاحظ ما سوف يحدث !
سوف تجد ان تنسيق وسم h1 سوف يطبق على كلمة (أهلا وسهلا) مع أنها مكتوبه بداخل وسم p ، ولكن لأاننا لم نقم بإغلاق وسم ال h1 ، ظل تنسيق الوسم يطبق الى مالانهايه على كل الاوسمه الموجوده بالصفحه.
- هام جدا عند استخدام توصيفات (Arrtibutes ) داخل العنصر
نلجأ فى أحيان كثيره إلى استخد بعض التوصيفات داخل العناصر ، مثل توصيف href الذى نحدد به مسار اللينك داخل وسم a ، وتوصيف title الذى نحدد به عنوان الصوره بداخل وسم img ،
نحن معتادون دائما على كتابة قيمة التوصيف بداخل علامات تنصيص فرديه أو زوجيه، لكن انتبه ، قد يكون من الخطأ أحيانا استخدام علامات تنصيص فرديه او زوجيه،
فمثلا ، عند تحديد قيمه لتوصيف title داخل صوره بهذا الشكل
الإجابه بسيطه ومهمه جدا،
نعم، يمكننا جعل حجم اى وسم نفس حجم اى وسم أخر بإستخدام خواص التحكم فى ال font فى لغة ال CSS ، فيمكننا جعل حجم خط وسم p نفس حجم خط وسم h1،
لكن لا نقوم بذلك، ولا يجب عليك إطلاقا أن تقوم بذلك، لانك بهذه الطريقه سوق تحدث تشويه للموقع غيلا ملاحظ.
الموضوع متعلق بمحركات البحث،
محركات البحث مثل جوجل وبينج، حينما تقوم بأرشفة محتوى الموقع، فإنها تنظر وتبحث عن أشياء مهمه جدا لإتمام عملية الأرشفه وظهور الموقع فى محرك البحث بنجاح،
من أهم هذه الاشياء، هو وجود أوسمة ال Heading مثل h1 فى الموقع، ذلك ليست القضيه هى قدرتنا على مساواة أحجام الخطوط ببعضها بإستخدام خواص ال CSS، ولكن الأمر متعلق أكبر بمستقبل الموقع فى محركات البحث.
لكن فى الحقيقه هذا التوصيف مهم جدا، ليس فقط لانه يظهر نص بديل فى حالة عدم ظهور الصوره، ولكنه مهم بالنسبه للمستخدمين المكفوفين الذين يستخدمون أجهزة القارىء الاليكترونى والذى لا يمكنه قراءة الصوره إلا من خلال النص البديل الخاص بها، لذلك يجب عليك الاهتمام بتوصيف alt دائما أثناء إدراج صوره داخل الموقع
فمثلا هذا التعليق يقوم بربط صفحه تسمى ie.css فى حالة كان الموقع يتم عرضه على متصفح انترنت اكسبلورر :
:radar
abdelfattah eltayb
:Job
web developer
لاحظ ان قيمة توصيف title تحتوى بداخلها على علامات تنصيص زوجيه، فكتابتها داخل علامات تنصيص زوجيه بهذا الشكل خطأ فادح وسوف تحدث أخطاء غير متوقعه،
ولتصحيح ذلك نقوم بكتابة قيمة التوصيف بداخل علامات تنصيص فرديه وليست زوجيه.
والعكس صحيح أيضا، إذا كانت قيمة التوصيف تحتوى على علامات تنصيص فرديه، فجيب ان نضع قيمة التوصيف ككل داخل علامات تنصيص زوجيه.
- لماذا تعدد العناصر طالما يوجد CSS ؟
الإجابه بسيطه ومهمه جدا،
نعم، يمكننا جعل حجم اى وسم نفس حجم اى وسم أخر بإستخدام خواص التحكم فى ال font فى لغة ال CSS ، فيمكننا جعل حجم خط وسم p نفس حجم خط وسم h1،
لكن لا نقوم بذلك، ولا يجب عليك إطلاقا أن تقوم بذلك، لانك بهذه الطريقه سوق تحدث تشويه للموقع غيلا ملاحظ.
الموضوع متعلق بمحركات البحث،
محركات البحث مثل جوجل وبينج، حينما تقوم بأرشفة محتوى الموقع، فإنها تنظر وتبحث عن أشياء مهمه جدا لإتمام عملية الأرشفه وظهور الموقع فى محرك البحث بنجاح،
من أهم هذه الاشياء، هو وجود أوسمة ال Heading مثل h1 فى الموقع، ذلك ليست القضيه هى قدرتنا على مساواة أحجام الخطوط ببعضها بإستخدام خواص ال CSS، ولكن الأمر متعلق أكبر بمستقبل الموقع فى محركات البحث.
- لا تهمل توصيف alt بداخل وسم < img >
لكن فى الحقيقه هذا التوصيف مهم جدا، ليس فقط لانه يظهر نص بديل فى حالة عدم ظهور الصوره، ولكنه مهم بالنسبه للمستخدمين المكفوفين الذين يستخدمون أجهزة القارىء الاليكترونى والذى لا يمكنه قراءة الصوره إلا من خلال النص البديل الخاص بها، لذلك يجب عليك الاهتمام بتوصيف alt دائما أثناء إدراج صوره داخل الموقع
<img src="radar.jpg" title="radar4info" alt="radar web design" />
- هل تستخدم وسم < blockquote > ؟!
الكثير منا يستخدم وسم < blockquote > لكتابة إقتباس داخل الموقع، ويتناسى شىء مهم جدا، وهو توصيف اسمه cite ، هذا التوصيف مهم جدا أن تضيفه داخل وسم < blockquote > وتضعه بداخله الرابط او اللينك التابع له الاقتباس هذا، حيث يساعد ذلك محركات البحث لفهم موقعك بشكل أكبر.
< blockquote cite="http://www.radar4info.com"> this is web design course </blockquote>
- التعليقات الشرطيه Conditional Comments
<!-- this is a comment -->
وبالطبع، هذه التعليقات لا يقوم المتصفح بتحريرها وقرائتها او تنفيذ ما بداخلها.
لكن هل تعلم أن هناك تعليقات تسمى بالتعليقات الشرطيه، وهى تعليقات يتم تنفيذ ما بداخلها بالفعل إذا تحقق الشرط الذى حددته بداخلها،فمثلا هذا التعليق يقوم بربط صفحه تسمى ie.css فى حالة كان الموقع يتم عرضه على متصفح انترنت اكسبلورر :
<!--[if lt IE 9]>
<link href="ie.css" rel="stylesheet">
<![endif]-->
- القوائم الوصفيه Description Lists
كلنا يعلم أن وسم ال <ol> يستخدم لعمل قائمه مرقمه داخل الموقع، ووسم <ul> يستخدم لعمل قائمه غير مرقمه.
لكن هناك نوع أخر من القوائم نادرا ما نجدها فى موقع على الانترنت وهى القوائم الوصفيه ،
هذه القائمه الوصفيه بالأعلى تم علمها بإستخدام هذا الكود التالى :
<dl>
<dt>radar :</dt>
<dd>abdelfattah eltayb</dd>
<dt>Job :</dt>
<dd>web developer</dd>
</dl>
القائمه الوصفيه كما ترى يتم عملها بإستخدام وسم <dl> ، وكل عنصر بداخلها يتكون من :
- عنوان رئيسى
- عنوان فرعى
العنوان الرئيسى يتم عمله بإستخدام وسم <dt> والعنوان الفرعى يتم عمله بإستخدام وسم <dd> .
لمتابعة كورس تصميم المواقع المقدم برعاية مدونة رادار من هنـــــــــا.
محول الاكواد محول الأكواد اضافة الإبتسمات اضافة الإبتسمات