اذهب الي المحتوي
أوفيسنا
بحث مخصص من جوجل فى أوفيسنا
Custom Search

abedf

عضو جديد 01
 عرض الملف الشخصي  عرض المشاركات

  • Posts

    3

  • تاريخ الانضمام

  • تاريخ اخر زياره

 نوع المحتوي 

كل منشورات العضو abedf

  1. abedf
    السلام عليكم اخواني ...اليوم ساقوم باكمال الدرس الثاني ...متابعه ممتعه و مفيده ان شاء الله ... الدرس الثاني : اساسيات بناء صفحة ويب باستخدام الHTML المدة المتوقعه لانجاز الدرس : 15 دقيقه من خلال هذه الدرس سيتم توضيح التالي : 1- تعريف الوسوم الرئيسه في HTML 2- بناء صفحة ترحيبية. أولا : تعريف الوسوم الرئيسه فيHTML خلال هذا الدرس سيتم تعريف الوسوم الاساسية في بناء صفحات الHTML ويجب التنويه هنا الى ان هذه الوسوم تستخدم دائما في بناء أي صفحه لانها عناصر اساسية. يجب التنويه الى ان الوسوم أو TAG بالاجليزيه تبدأ دائما بالقوس <>و تنتهي بقوس مثل </> كالتالي : <P></P> مكونات صفحة الويب الرئيسه : 1- يجب ان تبدأ كل صفحة بالوسم التالي المسؤول عن تعريف نوع الويب <!DOCTYPE html> يوصع دايما اول سطر 2- تكويد صفحة الويب تبدأ دائما بالوسم <html> 3- تكويد صفحة الويب ينتهي دائما بالوسم </html> 4- معلومات راس الصفحه مثل العنوان توضع بين الوسم <header>….</header> 5- مكونات الصفحه توضع دائما بين الوسم <body> .... .... </body> يجب أن يتم استخدام هذه الوسوم الاساسيه في بناء أي صفحه من صفحات الويب ,التالي يبين المخطط الرئيسي لبناء صفحة الويب. <!DOCTYPE html> <html> <head> ...وسوم راس الصفحه توضع هنا..... </head> <body> ...وسوم محتويات الصفحه توضع هنا..... </body> </html> ثانيا : بناء صفحة ترحيبية الان عزيزي القارىء لنقم بانشاء اول صفحة ويب بشكل سريع , 1- قم بفتح محرر النصوص Notepad أو أي محرر تحب استعماله كما تم الذكر في الدرس السابق قم بطباعة التالي داخل محرر النصوص : <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>مثال بناء صفحة ويب اساسيه</title> </head> <body dir=”rtl”> <h1>مثال بناء صفحة ويب اساسيه</h1> </body> </html> 1- قم بحفظ الملف على سطح المكتب , قيم بتسميه الملف باسم Example.html لاتنس ان امتداد الملف عند الحفظ يجب أن يكون .html 2- قم بالنقر عالملف الذي حفظته Example.html لاحظ انه يتم فتح الملف مباشرة باستخدام المتصفح الرئيس المعرف على جهازك. 3- لابد أنك حصلت على نتيجه تشبه التالي : مثال بناء صفحة ويب اساسيه الان لنقم بشرح تلك الوسوم ...الوسوم ملخصه بالجدول أدناه...و بالترتيب حسب المثال الذي اعطيناه من السطر الاول الى التاني و الثاللث و هكذا .. الوسم ماذا يعني <!DOCTYPE html> تعريف بنوع الوثيقه <html> يعني البدأ بصفحة الHTML و دائما يجب ان يكون موجودات <head> تعريف البدأ براس الصفحه <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> هو من وسوم تعريف محتويات و معلومات الصفحه في عالم الويب , مهم في حالتنا لاننا نقوم بالبرمجه باللغه العربيه , حيث يقوم بتكويد الاحرف العربيه على المتصفحه. استخدم هذا الوسم دائما <title>مثال بناء صفحة ويب اساسيه</title> وسم يحتوي على عنوان للصفحه , حيث أن عنوان الصفحه في مثالنا هذا هو مثال بناء صفحة ويب اساسيه </head> تعريف الانتهاء من راس الصفحه <body dir="rtl"> تعريف البدأ بمحتويات الصفحه. لاحظ هنا اننا اضفنا الخاصيه dir="rtl" و هي مهمه في حالة التكويد باللعه العربيه و تعني ان الصفحه ستبدأ من اليمين للشمال حسب ما هو وارد في لغتنا العربيه. <h1>مثال بناء صفحة ويب اساسيه</h1> أي عباره تقع بين الوسم <h1></h1> هي عباره ترئيسيه تستخدم كعنوان لعرض نص في صفحات الويب. وهي ليست اجباريه , و تم استخادمها بهذا المثال فقط لعرض نص في صفحة الويب هذه. </body> تعريف الانتهاء بمحتويات الصفحه. </html> يعني الانتهاء بصفحة الHTML و دائما يجب ان يكون موجودات المرفق هو المثال الذي تم شرحه ... ارجو ان تكون الفائدة قد عمت Example1.zip
  2. abedf
    السلام عليكم ... لابأس , ساقوم بسرد الامور الاساسية بلغة الوسوم بشكل دوري حسب المستطاع و حسب الوقت المتوفر لي ان شاء الله , نسال الله ان تعم الفائده... لقد قمت بتلخيص الدروس التي باعتقادي بامكانها السماح للمتعلم بالمضي بعالم برمجة الويب , قد يتم لاحقا اضافة دروس اخرى أو دمج بعض الدروس. # عنوان الدرس الوقت المتوقع لانجاز الدرس 1 الدرس الأول : مقدمة 15 دقيقه 2 الدرس الثاني : اساسيات بناء صفحة ويب باستخدام الHTML5 15 دقيقه 3 الدرس الثالث : الوسوم الأساسية – الجزء الأول 15 دقيقه 4 الدرس الرابع : الوسوم الأساسية – الجزء الثاني 15 دقيقه 5 الدرس الخامس : تمرين – بناء صفحة شخصية 20 دقيقه 6 الدرس السادس : وسوم راس الصفحه 10 دقائق 7 الدرس السابع : وسوم الفقرات 10 دقائق 8 الدرس الثامن : وسوم الصور 10 دقائق 9 الدرس التاسع : وسوم التنسيق و الستايلات المباشره 15 دقائق 10 الدرس العاشر : تمرين – اكمال بناء الصفحة الشخصية 20 دقيقه 11 الدرس الحادي عشر : وسوم اضافيه – الجزء1 20 دقيقه 12 الدرس الثاني عشر : وسوم اضافية – الجزء2 20 دقيقه 13 الدرس الثالث عشر : تمرين - اكمال بناء الصفحة الشخصية 20 دقيقه ساقوم بشرح الدرس الأول بالمشاركه التاليه مباشرة ان شاء الله. الدرس الأول : مقدمة المدة المتوقعه لانجاز الدرس : 15 دقيقه من خلال هذه الدرس سيتم توضيح التالي : 1- تعريف بلغة الوسوم HTML5 2- الادوات المطلوبه لبناء صفحات الويب. أولا : تعريف بلغة الوسومHTML5 بشكل عام لغة الوسوم HTML5 هي لغه تعتمد بشكل اساسي على وسوم او تاغات لبناء صفحات الويب ,حيث تسمح للمستخدم بعرض مواد ما من خلال شبكة الانترنت بشكل مقروء و سهل , حيث يقوم متصفح الانترنت (مثل الانترنت اكسبلورر أو جوجل كروم أو فايرفوكس) بترجمة هذه الوسوم الى نصوص و صور و اشكال مقروؤه بالشكل الذي نعرفه الان. ما المقصود ب HTML ؟ Hyper Text Markup Language تعني بالعربيه لغة تنسيق (أو وصف) النصوص التشعبية. ماذا تصف صفحة الويب ؟ تصف صفحة الويب باستخدام الHTML محتويات الصفحة من خلال الوسوم المختلفة التي تم استخدامها في بناء الصفحه , على سبيل المثال : قد تعرض صفحة ويب ما صورة شخصيه مع معلومات شخصيه على شكل فقره ما (سنقوم بتعلم بناء ذلك لاحقا ان شاء الله) كيف أقوم بتصفح صفحات الويب ؟ يتم التصفح من خلال ما يعرف باسم متصفح الانترنت , و هنالك العديد من الاصدارات المتنوعه للمتصفح و من خلال العديد من الشركات , اشهرها هو : Google Chrome ,FireFox , Internet Explorer جوجل كروم , فايرفوكس , انترنت اكسبلورو وصلات لتحميل المتصفحات على جهازك ؟ بالامكان تحميل متصفح واحد على الأقل. الوصله التاليه لتحميل جوجل كروم من الانترنت : https://www.google.com/chrome/browser/desktop/ الوصله التاليه لتحميل فايرفوكس من الانترنت : https://www.mozilla.org/en-US/firefox/new/ امتداد صفحة الويب ؟ عند حفظ ملف الويب يكون امتدادها بشكل عام باحد التالي : Htm Html مثال : MyPage.html ثانيا : الادوات المطلوبه لبناء صفحات الويب للبدء ببناء صفحات الويب نحتاج الى محرر لتنفيذ و كتابة وسوم صفحات الويب , و بشكل عام هنالك العديد من محررات صفحات الويب و التي تساعد في عملية بناء الصفحات بشكل سريع و سهل دون وجود خلفيه قويه بعالم الوسوم الخاصه بالويب , و لكن أفضل طريقة للتعلم هي كتابة هذه الوسوم دون الاستعانه بادوات التحرير المتقدمه و ذلك لفهم الوسوم بشكل قوي و التمكن من السيطره على صفحات الويب التي تقوم بتصميمها , فيما بعد و بعد اكتساب الخبره يمكن اللجوء لهذه الادوات و المحررات. الادوات التي انصح باستخدامها و بشكل اساسي هي احد الادوات التاليه : 1- محرر النصوص Notepad: لاداعي لتحميله و تنصيبه على الجهاز , لانه موجود تلقائيا , للوصول اليه اتبع الخطوات بالوصله التاليه : http://internet14arab.blogspot.ae/2014/09/notepad-7.html ساقوم بالشرح باستخدم هذه الاده ان شاء الله. 2- Note Plus محرر يشبه Notepad و لكن به بعض الاضافات المساعده , يمكن تحميل التطبيق من خلال الوصله التاليه : https://notepad-plus-plus.org/download/v6.8.3.html 3- Microsoft WebMatrix من منتجات شركة مايكروسوفت. 4- Microsoft FrontPage منتج قديم من منتجات شركة مايكروسوفت , البعض ما زال يستخدم هذا المحرر و لكن البديل عنه هو المنتج بالنقطه3 , ساقوم بمشاركة وثيقة قمت باعدداها و محاضرتها سابقا تشرح هذه المنتج بعد الانتهاء من هذه الدروس ان شاء الله.
  3. abedf
    السلام عليكم ...هذه أول مشاركه لي ضمن هذا المنتدى المحترم ... الأخ عمار ...هنالك الكثير من المراجع المفيده لتعلم برمجة صفحات الويب ...ولكنى دائما انصح بالبدء بتعلم لغة الوسوم , و من راي المتواضع رابط الموقع ادناه مفيد جدا ..حيث انا شخصيا بدات رحلتي مع برمجيات الويب من خلاله قبل مايقارب 11 سنه ...وكذلك يعرض الموقع دروسه بشكل بسيط و مختصره (ما قل و دل ) و مشكلة الموقع الوحبده انه باللغه الانجليزيه : http://www.w3schools.com/html/default.asp بالامكان اعتماد درسين بشكل يومي ....الدرس يستغرق من 10 الى 15 دقيقه لمطالعة التفاصيل , و 15 دقيقه للتدرب. بالتوفيق ان شاء الله.
×
×
  • اضف...

Important Information

  I accept