عبير الغلا
08-11-08, 01:27 AM
مرحبــا بكــم إخوانـي الكـرام
دورة لتعلّم لغة :: HTML :: اللغة الأساسية في تصميم مواقع الويب بسهولة
بإذن الله ستكون دورة مبسطة وسهلة ويستطيع حتي المبتدئين التعمل مع تلك اللغة وتصميم المواقع بها
فقط تــابع معي
لماذا سأقوم بعمل تلك الدورة المبسطة ؟
أولا : بالطبع لكي يستفيد منها الجميع.
ثانيا:هذا الأهم : أنني لاحظت أن هنـاك الكثير من مصممين المواقع ولكن لا يعلمون شيئا عن تلك اللغة أصلا .. حيث يعتمدون قي ذلك علي البرامج المساعدة كبرنامج Microsoft FrontPage مثلا فهو برنامج ممتـاز ويوفر عليهم الكثيـر من الجهد ..
كمثال
هناك أناس يقومون بإنشاء موقعهم الخاص علي شبكة الإنترنت ببرنامج FrontPage مثلا ثم يأتون بعد ذلك ..يقولوا نحن أخطأنا في كذا وكذا وكذا فكيف يمكننا التعديل في الأكواد بيدينا لكي نصلح ما قمنا بعمله ..أقول لهم كان ينبغي عليك أولا تعلم لغة HTML لأنها الأساس الذي بنيت عليه مثل هذه البرامج ولا ينبغي عليك أن تقوم بالدخول وتصميم موقعك علي الإنترنت بدون علمك بتلك اللغة..فتابع لعلك تستفيد إن شاء الله
فلنبـدأ بسـم الله
أولا لنعرف ماهي لغة HTML ؟
هي اللغة الأساسية المستخدمة لإنشاء صفحات الإنترنت , وجاءت إختصار لكلمة
Hyper Text Markup ************************************************** ******
فمع تطور البرامج التي تمكنك وتتيح لك الإستغناء عن تلك اللغة إلا أنها غاية في الأهمية وينبغي علي كل مصمم أن يكون يكون علي دراية كافية بكيفية عمل الكود ..وتعتبر شرط أساسي لأي مصمم حتي يستطيع بعد ذلك التعامل مع اللغات الأخري كالPHP مثلا.......
كيف تعمل لغة HTML وما البرامج اللازمة لتعلمها ؟؟
أولا يلزم لعمل اللغة متصفح كال Internet Explorer أو NetscapeاوMozilla Firefox وفائدته : هي أنه سيكون بمثابة الشاشة التي سنعرض عليها عملنا خطوة بخطوة ومع كل تعديل .. وبالنسبة للبرامج المطلوبة يكفي أن يكون لديك جهاز جهاز كمبيوتر مثبت عليه نظام تشغيل .. أي نظام ..ومحرر نصوص مثل ال Notpad بالنسبة لل Windows وال Pico بالنسبة لل Linux
************************************************** ************************************************** ************************************************** ************************************************** ************************************************** ************************************************** ************************************************** ************************************************** ************************************************** ************************************************** ************************************************** ************************************************** ************************************************** ***************-
ملاحضه :: الـــ PICO والــ LINUX هما مشغلات للأجهزة مثل الــ WINDOWS تمام ..........
************************************************** ************************************************** ************************************************** ************************************************** ************************************************** ************************************************** ************************************************** ************************************************** ************************************************** ************************************************** ************************************************** ************************************************** ************************************************** ***************-
أولا سنتعرف علي ماهي مكونــات صفحة الإنترنت ؟
صفحة الإنترنت تتكون من منطقتين أساسيتين وهما الرأس والجسـم
أنظر الصورة
[فقط الأعضاء المسجلين والمفعلين يمكنهم رؤية الوصلات]نقره على هذا الشريط لتكبير الصورة[فقط الأعضاء المسجلين والمفعلين يمكنهم رؤية الوصلات]
والآن لتبـدأ في تصميم أولي صفحاتك علي شبكة الإنترنت ..
إفتح معي محرر النصوص " Notpad " (( المفكرة))
[فقط الأعضاء المسجلين والمفعلين يمكنهم رؤية الوصلات]نقره على هذا الشريط لتكبير الصورة[فقط الأعضاء المسجلين والمفعلين يمكنهم رؤية الوصلات]
بعد فتح محرر النصوص تفضّل بكتابة الآتي بها
<HTML>
<Head>
<Head/>
<Body>
<Body/>
<HTML/>
ما الذي قمت بكتابته حالا ؟؟
أقول لك :هذا هو التكوين الأساسي لجميع مواقع الويب التي تراها ولنبـدأ بالشرح التفصيلي ..
أولا: القوسين ..
<> هذا يسمي Start Tag أو وسم البداية , وبداخله يوضع الأمر المراد تنفيذه..
أمـا < /> هذا يسمي End Tag أو وسم النهاية , وبداخله يوضع الأمر نفس الأمر الموجود في وسم البداية للدلالة علي نهاية تنفيذ هذا الأمر .
وأما بالنسبة ل <HTML>
<Head>
تكتب هنـا الجملة التي تريد أن تكون عنوانا لصفحتك
<Head/>
<Body>
هنـا توضع المحتويات التي تريدها بداخل الصفحة
<Body/>
<HTML/>
لاحظ معي .. في البداية :: في أول كود ::
كتبنا<HTML>كدليل أننا نريالبدء في تنفيذ أمر وفي النهاية كتبنا <HTML/>للدلالة عليإنتهاء تنفيذ الأمر ..
وهذا نفس الكـلام الذي سيتكرر مع كل كود أو أمر سنقوم بكتابته من الآن .
إفتح محرر النصوص " Notpad " وانسخ معي الاكواد والصقه كما بالصورة
الاكواد هى ::
<HTML>
<Head>
منتديات الحرمان <title>
<title/>
<Head/>
<Body>
بسـم الله الرحمن الرحيم
<Body/>
<HTML/>
اعمل كما فى الصورة
[فقط الأعضاء المسجلين والمفعلين يمكنهم رؤية الوصلات]نقره على هذا الشريط لتكبير الصورة[فقط الأعضاء المسجلين والمفعلين يمكنهم رؤية الوصلات]
:: ملحوظـة ::
لا أنصـح بنسخ الأكواد ولصقها في محرر النصوص :: ينبغي أن تكتبها أنت بيديك فيكون أفضلحتى تحفضها
بعد كتابـة الأكواد في محرر النصوص قم بالذهاب لقائمةFile ملف ,,, اختر بعدها ,, Save Asواحفظ الملف مع مراعاة الإمتداد
Html.
فمثلا احفظه بإسم silint evel.html
كما فى الصووووورة
[فقط الأعضاء المسجلين والمفعلين يمكنهم رؤية الوصلات]نقره على هذا الشريط لتكبير الصورة[فقط الأعضاء المسجلين والمفعلين يمكنهم رؤية الوصلات]
احقضها ثم اغلق ال Notpadوإذهب إلي الصفحة
silint evelراح تلاقيها على شكل هذه الايقونه
[فقط الأعضاء المسجلين والمفعلين يمكنهم رؤية الوصلات]إفتح الصفحة الآن ولا حظ معي
[فقط الأعضاء المسجلين والمفعلين يمكنهم رؤية الوصلات]نقره على هذا الشريط لتكبير الصورة[فقط الأعضاء المسجلين والمفعلين يمكنهم رؤية الوصلات]
ماذا تري ؟؟
في منطقة الجسم Body عبارة " منتديات الحرمان " لكن بالطبع تفتقد التنسيق والجمال لكن أُهنيك فأنت قد توصلت
إلي نتيجة رائـعة فمعي لنبـدأ معا في عملية التنسيق
لنكن متفقيـن في البداية أن منطقة الرأس Head منتهية أي لا يتم التعديل فيها إلا بتغيير الجملة نهائيا " أي ليس هناك شكل أو لون وكذا..... فسيكون كل عملنا في التنسيق علي منطقة الجسم Body
دورة لتعلّم لغة :: HTML :: اللغة الأساسية في تصميم مواقع الويب بسهولة
بإذن الله ستكون دورة مبسطة وسهلة ويستطيع حتي المبتدئين التعمل مع تلك اللغة وتصميم المواقع بها
فقط تــابع معي
لماذا سأقوم بعمل تلك الدورة المبسطة ؟
أولا : بالطبع لكي يستفيد منها الجميع.
ثانيا:هذا الأهم : أنني لاحظت أن هنـاك الكثير من مصممين المواقع ولكن لا يعلمون شيئا عن تلك اللغة أصلا .. حيث يعتمدون قي ذلك علي البرامج المساعدة كبرنامج Microsoft FrontPage مثلا فهو برنامج ممتـاز ويوفر عليهم الكثيـر من الجهد ..
كمثال
هناك أناس يقومون بإنشاء موقعهم الخاص علي شبكة الإنترنت ببرنامج FrontPage مثلا ثم يأتون بعد ذلك ..يقولوا نحن أخطأنا في كذا وكذا وكذا فكيف يمكننا التعديل في الأكواد بيدينا لكي نصلح ما قمنا بعمله ..أقول لهم كان ينبغي عليك أولا تعلم لغة HTML لأنها الأساس الذي بنيت عليه مثل هذه البرامج ولا ينبغي عليك أن تقوم بالدخول وتصميم موقعك علي الإنترنت بدون علمك بتلك اللغة..فتابع لعلك تستفيد إن شاء الله
فلنبـدأ بسـم الله
أولا لنعرف ماهي لغة HTML ؟
هي اللغة الأساسية المستخدمة لإنشاء صفحات الإنترنت , وجاءت إختصار لكلمة
Hyper Text Markup ************************************************** ******
فمع تطور البرامج التي تمكنك وتتيح لك الإستغناء عن تلك اللغة إلا أنها غاية في الأهمية وينبغي علي كل مصمم أن يكون يكون علي دراية كافية بكيفية عمل الكود ..وتعتبر شرط أساسي لأي مصمم حتي يستطيع بعد ذلك التعامل مع اللغات الأخري كالPHP مثلا.......
كيف تعمل لغة HTML وما البرامج اللازمة لتعلمها ؟؟
أولا يلزم لعمل اللغة متصفح كال Internet Explorer أو NetscapeاوMozilla Firefox وفائدته : هي أنه سيكون بمثابة الشاشة التي سنعرض عليها عملنا خطوة بخطوة ومع كل تعديل .. وبالنسبة للبرامج المطلوبة يكفي أن يكون لديك جهاز جهاز كمبيوتر مثبت عليه نظام تشغيل .. أي نظام ..ومحرر نصوص مثل ال Notpad بالنسبة لل Windows وال Pico بالنسبة لل Linux
************************************************** ************************************************** ************************************************** ************************************************** ************************************************** ************************************************** ************************************************** ************************************************** ************************************************** ************************************************** ************************************************** ************************************************** ************************************************** ***************-
ملاحضه :: الـــ PICO والــ LINUX هما مشغلات للأجهزة مثل الــ WINDOWS تمام ..........
************************************************** ************************************************** ************************************************** ************************************************** ************************************************** ************************************************** ************************************************** ************************************************** ************************************************** ************************************************** ************************************************** ************************************************** ************************************************** ***************-
أولا سنتعرف علي ماهي مكونــات صفحة الإنترنت ؟
صفحة الإنترنت تتكون من منطقتين أساسيتين وهما الرأس والجسـم
أنظر الصورة
[فقط الأعضاء المسجلين والمفعلين يمكنهم رؤية الوصلات]نقره على هذا الشريط لتكبير الصورة[فقط الأعضاء المسجلين والمفعلين يمكنهم رؤية الوصلات]
والآن لتبـدأ في تصميم أولي صفحاتك علي شبكة الإنترنت ..
إفتح معي محرر النصوص " Notpad " (( المفكرة))
[فقط الأعضاء المسجلين والمفعلين يمكنهم رؤية الوصلات]نقره على هذا الشريط لتكبير الصورة[فقط الأعضاء المسجلين والمفعلين يمكنهم رؤية الوصلات]
بعد فتح محرر النصوص تفضّل بكتابة الآتي بها
<HTML>
<Head>
<Head/>
<Body>
<Body/>
<HTML/>
ما الذي قمت بكتابته حالا ؟؟
أقول لك :هذا هو التكوين الأساسي لجميع مواقع الويب التي تراها ولنبـدأ بالشرح التفصيلي ..
أولا: القوسين ..
<> هذا يسمي Start Tag أو وسم البداية , وبداخله يوضع الأمر المراد تنفيذه..
أمـا < /> هذا يسمي End Tag أو وسم النهاية , وبداخله يوضع الأمر نفس الأمر الموجود في وسم البداية للدلالة علي نهاية تنفيذ هذا الأمر .
وأما بالنسبة ل <HTML>
<Head>
تكتب هنـا الجملة التي تريد أن تكون عنوانا لصفحتك
<Head/>
<Body>
هنـا توضع المحتويات التي تريدها بداخل الصفحة
<Body/>
<HTML/>
لاحظ معي .. في البداية :: في أول كود ::
كتبنا<HTML>كدليل أننا نريالبدء في تنفيذ أمر وفي النهاية كتبنا <HTML/>للدلالة عليإنتهاء تنفيذ الأمر ..
وهذا نفس الكـلام الذي سيتكرر مع كل كود أو أمر سنقوم بكتابته من الآن .
إفتح محرر النصوص " Notpad " وانسخ معي الاكواد والصقه كما بالصورة
الاكواد هى ::
<HTML>
<Head>
منتديات الحرمان <title>
<title/>
<Head/>
<Body>
بسـم الله الرحمن الرحيم
<Body/>
<HTML/>
اعمل كما فى الصورة
[فقط الأعضاء المسجلين والمفعلين يمكنهم رؤية الوصلات]نقره على هذا الشريط لتكبير الصورة[فقط الأعضاء المسجلين والمفعلين يمكنهم رؤية الوصلات]
:: ملحوظـة ::
لا أنصـح بنسخ الأكواد ولصقها في محرر النصوص :: ينبغي أن تكتبها أنت بيديك فيكون أفضلحتى تحفضها
بعد كتابـة الأكواد في محرر النصوص قم بالذهاب لقائمةFile ملف ,,, اختر بعدها ,, Save Asواحفظ الملف مع مراعاة الإمتداد
Html.
فمثلا احفظه بإسم silint evel.html
كما فى الصووووورة
[فقط الأعضاء المسجلين والمفعلين يمكنهم رؤية الوصلات]نقره على هذا الشريط لتكبير الصورة[فقط الأعضاء المسجلين والمفعلين يمكنهم رؤية الوصلات]
احقضها ثم اغلق ال Notpadوإذهب إلي الصفحة
silint evelراح تلاقيها على شكل هذه الايقونه
[فقط الأعضاء المسجلين والمفعلين يمكنهم رؤية الوصلات]إفتح الصفحة الآن ولا حظ معي
[فقط الأعضاء المسجلين والمفعلين يمكنهم رؤية الوصلات]نقره على هذا الشريط لتكبير الصورة[فقط الأعضاء المسجلين والمفعلين يمكنهم رؤية الوصلات]
ماذا تري ؟؟
في منطقة الجسم Body عبارة " منتديات الحرمان " لكن بالطبع تفتقد التنسيق والجمال لكن أُهنيك فأنت قد توصلت
إلي نتيجة رائـعة فمعي لنبـدأ معا في عملية التنسيق
لنكن متفقيـن في البداية أن منطقة الرأس Head منتهية أي لا يتم التعديل فيها إلا بتغيير الجملة نهائيا " أي ليس هناك شكل أو لون وكذا..... فسيكون كل عملنا في التنسيق علي منطقة الجسم Body