المشاركات

تعليم برمجة xhtml

صورة
Xhtml : هي اختصار ل  extensible html وهي تعني html القابلة للتوسع و لها نفس الوسوم و الواصفات مع html فقط هي اكثر صرامة وتعطي توافق اكبر للصفحات المبرمجة بهذه اللغة مع متصفحات الويب ، فهناك اختلاف في متصفح خاص بالحاسوب و اخر خاص بالهاتف فبهذه البرمجة نحل مشكلة التوافق مع المتصفحات المختلفة . تحتوي xhtml على مجموعة من القواعد البسيطة : -  كتابة وسم الاغلاق - كتابة وسوم واصفات الصفحة باحرف صغيرة lower case - ان يكون ترتيب وسوم الاغلاق متناظر مع وسوم الفتح . - وضع القيم المسندة للواصفات بين  علامات اقتباس . - عدم الاستغناء عن اي وسم مثل <html> و <body>و <head> . - وضع تعريف لنوع المستند doctype في بداية الصفحة . يجب ان تحتوي كل صفحة في xhtml على سطر التعريف <DOCTYPE!> والذي يعني تعريف نوع المستند document type definition او اختصارا ب dtd ، و يستخدم هذا السطر من طرف المتصفح كمرجعية قواعدية  لصيغة الكتابة و انواع الوسوم في الصفحة . في هذه الشيفرة تعرض نوع المستند الذي تصادفه في اغلب صفحات xhtml و الذي يجب ان يكتب في اول سطر من الصفحة المراد برمجتها .

جميع وسوم html tags مع الشرح

صورة
 اليك جميع الوسوم المستعملة في برمجة html و شرح مفصل لكل tag 

العنصر meta و اهميته لمحركات البحث seo

صورة
 العنصر meta في صفحة html : هو عنصر مهم في تحسين الموقع و ارشفته في محركات البحث ، حيث يستخدم هذا الكود في راس الصفحة بين وسمي <head> و <head/> يساعد محركات البحث في تصنيف الموقع و عرضه ضمن نتاءج البحث من خلال الكلمات المفتاحية content التي توضع في هذا الوسم . و اهم عنصرين في كود meta  هما kaywords و description لاحظ الشكل التالي : يعرض العنصر meta مجموعة من الكلمات المفتاحية kaywords التي تساعد في البحث و العنصر description يحتوي على وصف للمحتوى الذي موجود في الموقع . العنصر meta و الكلمات المفتاحية و الوصف لا يظهر في مستعرض البحث فقط هو مخصص لتقديم بيانات الموقع لمحركات البحث حيث يساعد في ارشفة الموقع و تصدره في نتاءج البحث  .

مجموعة خدمات freelancer المتوفرة

صورة
- خدمةإنشاء متجر الكتروني إحترافي على شوبفاي:  اضغط هنا  - خدمة  انشاء موقع الكتروني : اضغط هنا - خدمةارسال الزوار من امريكا لموقعك  اضغط هنا   - خدمة انشاء فديوهات موشن غرافيك  اضغط هنا

طريقة ربط ملف html مع css

صورة
نستخدم في عملنا هذا برنامح dreamweaver cs6 , نقوم بتجهيز مجلد خاص و نسميه css في الحاسوب ، ثم نذهب الى برنامج dreamweaver و نظغط file ثم new ، بعدها نختار html . نقوم بحفظ الملف باسم index.html  . نقوم بانشاء ملف css مرة اخرى بنفس الطريقة الاولى فقط نغير الصيغة الى css , و نسمي الملف ب style . الان الخطوة المهمة هي ربط الملفين html مع css , سنكتب الكود التالي :  في السطر 8 كود  (link)  يرمز للرابط سيساعدك البرنامج في كتابته بسهولة  . Rel ترمز للغة الملف ، type ترمز لنوع الملف ، اما href ترمز لمكان الملف بمجرد كتابة هذا الوسم سيساعدك البرنامج في تحديد مكان الملف  و يكتب كود . تستخدم الcss خاصية الوراثة في استدعاء خواص معينة و تطبيقها على div او داخل النص لتسهيل العمل عليها فبدل ان يقوم المبرمح بعمل جدول او نص او div داخل صفحات الموقع بعدد كبير ، يكفي ان يضع class في ملف css لنص مثلا او جدول و  باخذ خصاءصه من كود الكلاس فقط لاختصار العملية  . هناك بعض العناصر اساسية لا يتم عمل (class) لها مثل h1 h2 h3 , body .... الخ

جلب الترافيك من google عن طريق رابط usg

صورة
  هذه الطريقة التي ساشرحها مفيدة جدا في تحسين موقعك لمحركات البحث seo تابع معي الشرح للاخر لتفهم اكثر . ﻛﻴﻒ ﺗﻈﻬﺮ ﻣﺼﺪر اﻟﺘﺮاﻓﻴﻚ ﻋﻠﻰ  أﻧﻪ من ﺟﻮﺟﻞ ؟  ﻧﻌﻢ ﻋﺰﻳﺰي اﻟﻘﺎرئ ﺳﻨﻈﻬﺮ اﻟﺘﺮاﻓﻴﻚ ﻋﻠﻰ أﺳﺎس أﻧﻪ ﺟﻮﺟل. ﻗﺪ ﺗﺘﺴﺎﺋﻞ ﻛﻴﻒ ذﻟﻚ اﻷﻣﺮ ﻓﻲ ﻏﺎﻳﺔ اﻟﺒﺴﺎﻃﺔ ﻳﻜﻔﻲ  أن ﺗﺤﺼﻞ ﻋﻠﻰ راﺑﻂ ﻳﺤﺘﻮى ﻋﻠﻰ ﺑﺎراﻣﻴﺘﺮ ﺻﻔﺤﺎت ﻣﻮﻗﻌﻚ، ﻓﻜﻞ ﺻﻔﺤﺔ ﻣﻦ ﺻﻔﺤﺎت ﻣﻮﻗﻌﻚ المؤرشفة  لها USG  ﻓﻲ ﺟﻮﺟﻞ مثال :  https://google.com/url?sa=t&source=web&rct=j&url=http:// www.elhorrdz.com/%3Fm%3D1&usg=AOvVaw3L0qp Leg72I4vTzHY7Zr1G   ﻫﺬا  الرابط ﺧﺎص ﺑﺎﻟﺼﻔﺤﺔ اﻟﺮﺋﻴﺴﻴﺔ لموقع elhorrdz ، ﺑﻌﺪ  تغيير الباراميتر الخاص بموقعك و الضغط عليه ﺳﺘﺠﺪ أن ﻣﺼﺪر اﻟﺘﺮاﻓﻴﻚ اﻟﺬي ﻗﺪﻣﺖ ﻣﻨﻪ ﻫﻮ ﺟﻮﺟﻞ . طريقة استخراج البراميتر usg :    ﺳﺄﻋﻄﻴﻚ اﻟخطوات ﺑﺎﻟﺘﻔﺼﻴﻞ اﻟﻤﻤﻞ ﻓﻘﻂ ﺗﺎﺑﻊ  اﻟشرح و ركز : - اخراج اداة مطور المواقع inspect ، نختار جلاكسي s5  ,  - نقوم بالدخول لجوجل و نكتب هذا الدورك   (اسم موقعك:site) - نقوم ب inspect لرابط موقعك من نتاءج بحث جوجل للحصول على usg . لاحظ في الخطوة السابقة اننا قمنا باستهداف attribute المسمى ping ﺳﻨﻜﻮن ﻗﺪ ﺣﺼﻠﻨﺎ ﻋﻠﻰ راﺑﻂ ﻛﺎﻟﺘﺎﻟﻲ : /url?sa

استخدام الوسوم div و span

صورة
 وسم division tag : استخدمنا في الدروس السابقة في html الجداول لبناء الموقع ، سنستعمل وسم <div>  و هو عبارة عن وحدة احتواء لعناصر صفحة الويب و تقسيمها الى اقسام   و يكتب عادتا في صفحة html و php . مثال :  وسم span tag : هو كود يستخدم في التحكم  بالنصوص  ، و لاختصار الوقت يستخدم div احسن منه .  في المثال الموالي سنضع كود span بداخله استخدمنا ستايل نوع inline و خاصية اللون الازرق ثم اغلقنا ال span