Translate
U3F1ZWV6ZTEwNzU2NzEzODg4X0FjdGl2YXRpb24xMjE4NTg3MzAwNTM=
recent
أخبار ساخنة

20 نصيحة مهمة في html للمبتدئين

Abdou_Dz
السلام عليكم
المطور المحترف هو من يستعمل طريقته الخاصة في التكويد ، لذلك في هذا الموضوع أريد تقديم بعض النصائح حول HTML التي ستساعد المطور و مصمم صفحات الويب في الحصول على أفضل شكل و منافشة الوصول الى كود جيد . إليكم 20 نصيحة هامة لتحقيق ذلك .


#1 تأكد من إغلاق السمات (TAG ) دائما :

تعمل بعض العلامات إذا لم تقم بإغلاقها و لكن قد تسبب لك مشاكل فيما بعد و قد يحدث لك خلط يجعلك تمل و تكره ما تقوم به لأنه لن يحقق لك المطلوب 
الطريقة الخاطئة :
<li>اكتب نصك هنا.
<li>اكتب هنا ما تريد .
<li>فكرتك.

الطريقة الصحيحة :
<ul>
<li>اكتب نصك هنا.</li>
<li>اكتب هنا ما تريد .</li>
<li>فكرتك.</li>
</ul>

#2 أدخل وسوم اللغة العربية :

لكي لا تظهر عندك أخطاء و رموز غريبة عند إدخال حروف عربية يجب أن تقوم بإدخال الوسوم التالية :

أولا وسم البداية يجب أن يكون من هذا الشكل :
<html lang="ar" dir="rtl">

ثانيا إضافة سطر META التالي بين وسمي <head>  و <head/>

<meta charset="utf-8">

#3 لا تدخل تنسيق كل سطر منفرد و إستعمل ملف استايل أفضل :

لا تستخدم نمطا خاصا في كل سطر. يمكن أن تجعل التعليمات البرمجية الخاصة بك أكثر صعوبة و تعقيد . الى جانب انها لن تظهر بشكل جيد.

الطريقة الخاطئة : 
<p style="color: red;"> هذا النص سيظهر بشكل أحمر </p>

الطريقة الصحيحة هي إضافة كود التنسيق في ملف Css هكذا :

p {
   color: red;
}

إذا كنت مبتدأ أو غير مطلع على لغة التنسيق Css يمكنك زيارة الكورس التالي :


#4 أضف كل ملفات التنسيق بين وسمي الرآس  :

إذا كنت تريد تحميل موقعك بشكل سريع عليك إضافة كل أكواد 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>

#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>

#6  إضافة كل أكواد Javascript في ملف واحد  :

لماذا يجب أن تضع كامل أوامر الجافا سكريبت في ملف واحد ؟ لأن ذلك لن يجعل تحميل موقعك أسرع فقط ! بل ستقلل من إستهلاك الباندويث bandwidth .

#7  إستعمل أداة firebug  :

إستعمل الأداة المجانية  فاير بيغ من أجل التحقق من صحة أكواد html المستعملة .. و الإضافة تجدها هنا :

#8  إستعمل الحروف الصغيرة في TAG  :

الطريقة الخاطئة :
<DIV>
<P>نصائح مهمة حول html  </P>
</DIV>

الطريقة الصحيحة :
<div>
<p>نصائح مهمة حول html </p>
</div>

#9  إستعمل وسوم العناوين h1-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]-->

#11 إستعمل محرر أكواد مميز :

إليكم بعض المحررات المميزة و الرائدة في مجالها :

#12 إضغط ملفات Css و الـJavascript الخاصة بك :

من أجل سرعة تحميل موقعك و تجنب البطئ و التقطعات يجب أن تقوم بضغط ملفات Css و الجافا سكريبت و يمكنك فعل ذلك بشكل مجاني و سريع و أون لاين فالكثير من المواقع تقدم هذا الخدمات و إليكم بعضها :

ضغط ملفات الجافا سكريبت : 

ضغط ملفات Css :

#13 حذف الرموز غير الفعالة او الميتة :

عندما تنتهي من تهئية موقعك أو صفحتك يجب مراجعة الكود جيدا و التخلص من الآكواد و الرموز التي ليس لها تأثير و ليست فعالة

#14 تحميل أداة yslow :

من بين أجمل الآدوات التي يحتاجها مصممو المواقع ، الأداة من برمجة Yahoo و تقوم بإختبار صفحتك و كشف العديد من الآخطاء و تقوم الآداء بأكثر من 23 إختبار وفق معايير محترفة . حمل الآداء و إكتشف مميزاتها من هنا 

#15 إستعمل خاصية alt في إدخال الصور :

خاصية alt هي إختصار لكلمة alternate بمعني بديل ، أي في حالة عدم ظهور الصورة فإن النص سيظهر كبديل لها و هذه الخاصية مفيدة جدا لـSEO .

الطريقة الخاطئة :

<IMG src="angle47.jpg"/>

الطريقة الصحيحة :

<img src="html-tips.jpg" alt="نصائح مفيدة في html" />

#16 عرض Page Source لأي موقع :

من المهم للمبتدأين و حتى للمحترفين معاينة أكواد أي موقع يعجبك شكله و ذلك بالضغط على F12 في متصفح الكروم أو بالضغط على يمين الفأرة و إختيار  " afficher le code source de  la page " او ما يناسبها في الإنجليزية او العربية حسب لغة متصفحك




#17 جهز إستايل لكل الخصائص التي ستحتاجها في موقعك

 #18 تعلم الفوتوشوب فأنت تحتاجه حتما

 #19 تابع التحديثات من أجل الحصول على جديد وسوم 

#20 إنظم للمنتديات و المدونات و المواقع المهتمة بالبرمجة لتنمي مكتسباتك و تطور قدراتك .


أتمنى أن يستفيد الجميع من هذه النصائح و الإرشادات .. 

بالتوفيق لكم و أي مشكل أو إستفسار إتصلوا بي أو اترك إستفسارك في تعليق 


تعديل المشاركة
author-img

Abdou_Dz

قد تُعجبك هذه المشاركات
تعليقات
    تعليقان (2)
    إرسال تعليق
    • Unknown photo
      Unknown03 مايو, 2018 20:47

      Ahaa, its pleasant discussion concerning this post here at this website, I have read all that, so at this time me also commenting here. aol mail login

      إرسال تعليقحذف التعليق
      • David photo
        David22 أغسطس, 2020 11:05

        شكرا جزيلا لمشاركة النصائح. يقال دائمًا أنه من الصعب ترميزها وصيانتها أصعب بكثير. نصائحك ليست مفيدة فقط لوجهة نظر المطور ، ولكن أيضًا لغرض تحسين محركات البحث أيضًا.
        لتحسين صفحتك ، يمكنك أيضًا الحصول على الأدوات من الرابط التالي
        https://url-decode.com/cat/
        كذلك. حيث ستجد الأدوات المتعلقة بالتصغير وتحسين الصورة وغير ذلك الكثير.

        إرسال تعليقحذف التعليق

        إرسال تعليق

        الاسمبريد إلكترونيرسالة