13 نصيحة حول HTML التي ستساعد المطور و مصمم صفحات الويب في الحصول على أفضل شكل و الوصول الى كود جيد:
#1 تأكد من إغلاق السمات (TAG ) دائما :
تعمل بعض العلامات إذا لم تقم بإغلاقها و لكن قد تسبب لك مشاكل فيما بعد و قد يحدث لك خلط يجعلك تمل و تكره ما تقوم به لأنه لن يحقق لك المطلوب
الطريقة الخاطئة :
<li>اكتب نصك هنا.
<li>اكتب هنا ما تريد .
<li>فكرتك.
الطريقة الصحيحة :
👇
تعمل بعض العلامات إذا لم تقم بإغلاقها و لكن قد تسبب لك مشاكل فيما بعد و قد يحدث لك خلط يجعلك تمل و تكره ما تقوم به لأنه لن يحقق لك المطلوب
الطريقة الخاطئة :
<li>اكتب نصك هنا.
<li>اكتب هنا ما تريد .
<li>فكرتك.
الطريقة الصحيحة :
👇
<ul>
<li>اكتب نصك هنا.</li>
<li>اكتب هنا ما تريد .</li>
<li>فكرتك.</li>
</ul>
<li>اكتب نصك هنا.</li>
<li>اكتب هنا ما تريد .</li>
<li>فكرتك.</li>
</ul>
#2 أدخل وسوم اللغة العربية :
لكي لا تظهر عندك أخطاء و رموز غريبة عند إدخال حروف عربية يجب أن تقوم بإدخال الوسوم التالية :
أولا وسم البداية يجب أن يكون من هذا الشكل :
<html lang="ar" dir="rtl">
ثانيا إضافة سطر META التالي بين وسمي <head> و <head/>
<meta charset="utf-8">
لكي لا تظهر عندك أخطاء و رموز غريبة عند إدخال حروف عربية يجب أن تقوم بإدخال الوسوم التالية :
أولا وسم البداية يجب أن يكون من هذا الشكل :
<html lang="ar" dir="rtl">
ثانيا إضافة سطر META التالي بين وسمي <head> و <head/>
<meta charset="utf-8">
#3 لا تدخل تنسيق كل سطر منفرد و إستعمل ملف استايل أفضل :
لا تستخدم نمطا خاصا في كل سطر. يمكن أن تجعل التعليمات البرمجية الخاصة بك أكثر صعوبة و تعقيد . الى جانب انها لن تظهر بشكل جيد.
الطريقة الخاطئة :
<p style="color: red;"> هذا النص سيظهر بشكل أحمر </p>
الطريقة الصحيحة: 👇
لا تستخدم نمطا خاصا في كل سطر. يمكن أن تجعل التعليمات البرمجية الخاصة بك أكثر صعوبة و تعقيد . الى جانب انها لن تظهر بشكل جيد.
الطريقة الخاطئة :
<p style="color: red;"> هذا النص سيظهر بشكل أحمر </p>
الطريقة الصحيحة: 👇
هي إضافة كود التنسيق في ملف Css هكذا :
p {
color: red;
}
p {
color: red;
}
#4 أضف كل ملفات التنسيق بين وسمي الرآس :
إذا كنت تريد تحميل موقعك بشكل سريع عليك إضافة كل أكواد Css بين وسمي الرآس هكذا :
<head>
<title> موقعي الأول </title>
<link href="path/to/file.css" media="screen" rel="stylesheet" type="text/css"/>
..👇
إذا كنت تريد تحميل موقعك بشكل سريع عليك إضافة كل أكواد Css بين وسمي الرآس هكذا :
<head>
<title> موقعي الأول </title>
<link href="path/to/file.css" media="screen" rel="stylesheet" type="text/css"/>
..👇
<link href="path/to/anotherFile.css" media="screen" rel="stylesheet" type="text/css"/>
</head>
</head>
#5 أضف أكواد Javascript قبل إغلاق وسم الهيكل <body/> :
من الأفضل للمطورين و مصممي صفحات الويب إدخال اكواد ملفات الجافا سكريبت قبل إغلاق وسم الهيكل و ذلك لتحميل الموقع بشكل سريع و بطريقة سلسلة :
👇
من الأفضل للمطورين و مصممي صفحات الويب إدخال اكواد ملفات الجافا سكريبت قبل إغلاق وسم الهيكل و ذلك لتحميل الموقع بشكل سريع و بطريقة سلسلة :
👇
<p> .حقوق الموقع </p>
<script type="text/javascript" src="path/to/file.js"></script>
<script type="text/javascript" src="path/to/anotherFile.js"></script>
</body>
</html>
<script type="text/javascript" src="path/to/file.js"></script>
<script type="text/javascript" src="path/to/anotherFile.js"></script>
</body>
</html>
#6 إضافة كل أكواد Javascript في ملف واحد :
لماذا يجب أن تضع كامل أوامر الجافا سكريبت في ملف واحد ؟ لأن ذلك لن يجعل تحميل موقعك أسرع فقط ! بل ستقلل من إستهلاك الباندويث bandwidth .
لماذا يجب أن تضع كامل أوامر الجافا سكريبت في ملف واحد ؟ لأن ذلك لن يجعل تحميل موقعك أسرع فقط ! بل ستقلل من إستهلاك الباندويث bandwidth .
#7 إستعمل أداة firebug :
إستعمل الأداة المجانية فاير بيغ من أجل التحقق من صحة أكواد html المستعملة .. و الإضافة تجدها هنا :
getfirebug.com لجوجل كروم
---------------------------------
addons.mozilla.org لفاير فوكس
إستعمل الأداة المجانية فاير بيغ من أجل التحقق من صحة أكواد html المستعملة .. و الإضافة تجدها هنا :
getfirebug.com لجوجل كروم
---------------------------------
addons.mozilla.org لفاير فوكس
#8 إستعمل الحروف الصغيرة في TAG :
الطريقة الخاطئة :
<DIV>
<P>نصائح مهمة حول html </P>
</DIV>
الطريقة الصحيحة :
<div>
<p>نصائح مهمة حول html </p>
</div>
الطريقة الخاطئة :
<DIV>
<P>نصائح مهمة حول html </P>
</DIV>
الطريقة الصحيحة :
<div>
<p>نصائح مهمة حول html </p>
</div>
#9 إستعمل وسوم العناوين h1-h6 :
أنصح دائما بإستعمال وسوم العناوين المتوفرة بـ6 أحجام فبقدر ما يسهل تنظيم الصفحة فهو يسهل أيضا الحصول على بعض SEO
<h1> عنوان رئيسي كبير </h1>
<h6> عنوان صغير </h6>
أنصح دائما بإستعمال وسوم العناوين المتوفرة بـ6 أحجام فبقدر ما يسهل تنظيم الصفحة فهو يسهل أيضا الحصول على بعض SEO
<h1> عنوان رئيسي كبير </h1>
<h6> عنوان صغير </h6>
#10 إضافة أكواد Css الخاصة بـ Internet Explorer :
إنشأ ملف ie.css و فكر في إضافة بعض الخصائص المتوافقة معه لأن بعض الخصائص و الآوامر البرمجية لا تعمل على كل المتصفحات .
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" media="screen" href="path/to/ie.css" />
<![endif]-->
إنشأ ملف ie.css و فكر في إضافة بعض الخصائص المتوافقة معه لأن بعض الخصائص و الآوامر البرمجية لا تعمل على كل المتصفحات .
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" media="screen" href="path/to/ie.css" />
<![endif]-->
#11 إستعمل محرر أكواد مميز :
إليكم بعض المحررات المميزة و الرائدة في مجالها :
InType
E-Text Editor
Notepad++
Aptana
Dreamweaver CS4
إليكم بعض المحررات المميزة و الرائدة في مجالها :
InType
E-Text Editor
Notepad++
Aptana
Dreamweaver CS4
#12 إضغط ملفات Css و الـJavascript الخاصة بك :
من أجل سرعة تحميل موقعك و تجنب البطئ و التقطعات يجب أن تقوم بضغط ملفات Css و الجافا سكريبت و يمكنك فعل ذلك بشكل مجاني و سريع و أون لاين فالكثير من المواقع تقدم هذا الخدمات.
من أجل سرعة تحميل موقعك و تجنب البطئ و التقطعات يجب أن تقوم بضغط ملفات Css و الجافا سكريبت و يمكنك فعل ذلك بشكل مجاني و سريع و أون لاين فالكثير من المواقع تقدم هذا الخدمات.
#13 حذف الرموز غير الفعالة او الميتة :
عندما تنتهي من تهئية موقعك أو صفحتك يجب مراجعة الكود جيدا و التخلص من الآكواد و الرموز التي ليس لها تأثير و ليست فعالة.
@rattibha رتب
عندما تنتهي من تهئية موقعك أو صفحتك يجب مراجعة الكود جيدا و التخلص من الآكواد و الرموز التي ليس لها تأثير و ليست فعالة.
@rattibha رتب
جاري تحميل الاقتراحات...